vue关键帧动画

最新推荐文章于 2024-08-23 15:35:33 发布

weixin_34117522

最新推荐文章于 2024-08-23 15:35:33 发布

阅读量2.2k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://yq.aliyun.com/articles/648313

版权

 
   <style> 
  
   #box 
   { 
  
   width 
   : 
   100px 
   ; 
  
   height 
   : 
   100px 
   ; 
  
   background-color 
   :  
   red 
  
    } 
  
   @keyframes 
     
   come-in 
   { 
  
    0%{ 
  
   transform 
   :  
   rotate 
   ( 
   45deg 
   ); 
  
   opacity 
   :  
   0 
   ; 
  
    } 
  
    50%{ 
  
   transform 
   :  
   rotate 
   ( 
   45deg 
   ); 
  
   opacity 
   :  
   1 
   ; 
  
    } 
  
    100%{ 
  
   transform 
   :  
   rotate 
   ( 
   0 
   ); 
  
   opacity 
   :  
   1 
   ; 
  
    } 
  
    } 
  
   @keyframes 
     
   come-out 
   { 
  
    0%{ 
  
   transform 
   :  
   rotate 
   ( 
   0 
   ); 
  
   opacity 
   :  
   1 
   ; 
  
    } 
  
    50%{ 
  
   transform 
   :  
   rotate 
   ( 
   45deg 
   ); 
  
   opacity 
   :  
   1 
   ; 
  
    } 
  
    100%{ 
  
   transform 
   :  
   rotate 
   ( 
   45deg 
   ); 
  
   opacity 
   :  
   0 
   ; 
  
    } 
  
    } 
  
   /* 在transtion标签中使用关键帧动画，只需要设置 enter-active和leave-active两个class即可，在class中设置要执行的动画*/ 
  
   .ani-enter-active 
   { 
  
   animation 
   :come-in  
   1s 
   ;  
  
    } 
  
   .ani-leave-active 
   { 
  
   animation 
   :come-out  
   1s 
   ;  
  
    } 
  
   #d2 
   { 
  
   width 
   : 
   500px 
   ; 
  
   height 
   : 
   100px 
   ; 
  
   background-color 
   :  
   rgb 
   ( 
   0 
   ,  
   255 
   ,  
   136 
   ) ; 
  
    } 
  
   .com 
   { 
  
   animation 
   :come-in  
   1s 
   ;  
  
    } 
  
   .go 
   { 
  
   animation 
   :come-out  
   1s 
   ;  
  
    } 
  
   < 
   /style> 
  
   </head> 
  
   <body> 
  
   <div 
     
   id 
   = 
   "app" 
   > 
  
   <input 
     
   type 
   = 
   "checkbox" 
     
   v-model 
   = 
   "show" 
   > 
  
   <transition 
     
   name 
   = 
   "ani" 
   > 
  
   <div 
     
   id 
   = 
   "box" 
     
   v-show 
   = 
   "show" 
   ></div> 
  
   </transition> 
  
   <!-- 使用关键帧动画，也可以直接在transition标签中直接指定动画所在的class --> 
  
   <!-- 这样可以方便的使用第三方动画库（例如animate。css）中的关键帧动画 --> 
  
   <transition 
  
   enter-active-class 
   = 
   "rollIn animated" 
  
   leave-active-class 
   = 
   "hinge animated" 
   > 
  
   <div 
     
   id 
   = 
   "d2" 
     
   v-show 
   = 
   "show" 
   ></div> 
  
   </transition> 
  
   </div> 
  
   <script 
     
   src 
   = 
   "vue.js" 
   > 
   < 
   /script> 
  
   <script> 
  
   new 
     
   Vue 
   ({ 
  
   el: 
   "#app" 
   , 
  
   data: 
   { 
  
   show: 
   false 
  
    } 
  
    }) 
  
   < 
   /script> 
  
   </body>