뷰의 CSS 애니메이션 원리

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 머리 > 
    < 메타 문자 집합 = "UTF-. 8" > 
    < 제목 > 애니메이션의 CSS 원칙 </ 제목 > 
    < 스크립트 SRC에 = "../ JS / vue.js" > </ 스크립트 > 
    <! - 공식 웹 사이트 : HTTPS : //cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB -> 
    < 스타일 > 
        . (가) 입력 - 페이드   / * 전이 상태의 처음으로 * / 
        .남겨 - 투 - 페이드 {   / * 멀리 종료 상태로의 전환에서* / 
            불투명도 : 0 ; 
        } 
        .fade 액티브가-입력 / * 입력 개시 상태 전이 * / 
        .fade - 휴가 - 액티브 {  / * 휴가 개시의 상태 전이 * / 
            전환 : 불투명도가 .5s ; 
        } 
        . 슬라이드 입력 액티브 - 페이드 {  / * 기간과 애니메이션 기능 설정 * / 
            전환 : 모든 .3s EASE ; 
        } 
        슬라이드 페이드 휴가 액티브가. { 
            전환이 : 큐빅 베 지어을 모두-.8s (1.0,0.5,0.8,1.0를 ) ; 
        }
        , .slide에 페이드 - 휴가 - .slide 페이드는 입력 { 
            변환 : translateX (10px)를 ; 
            불투명도 : 0 ; 
        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 
< DIV ID = "응용 프로그램" > 
    < 버튼 @click = "btnClick" > 변경 </ 버튼 > 
    < 트랜지션 이름 = "페이드" > 
        < DIV V-IF = "쇼 " >> 
    </ 천이 > 
    < HR > 
    < 전이 이름 = "슬라이드 페이드" > 
        < DIV V-IF = "쇼" > 헬로 </ DIV > 
    </ 천이 > 
</ DIV > 
< 스크립트 > 
    VM =  새로운 뷰 ({
        에 : ' #app ' ,
        데이터 : {
            표시 : 사실
        },
        행동 양식:{
            btnClick : 함수 () {
                이 .show =  ! 이 .show
            }
        }
    })
</ 스크립트 > 
</ 몸 > 
</ HTML >