vue动画

https://cn.vuejs.org/v2/guide/transitions.html 一个动画包括两个时间点，一个时间段

1、可以使用过渡类名实现动画效果

2、使用第三方类实现动画

https://daneden.github.io/animate.css/

• 定义 transition 及属性：

      	
     
      动画哦
     
    复制代码

3、使用动画钩子函数

• 定义 transition 组件以及三个钩子函数

    
    
         
           
      
       OK
      
    
      
    
复制代码

• 定义三个 methods 钩子方法：

methods: {    beforeEnter(el) { // 动画进入之前的回调       el.style.transform = 'translateX(500px)';     },     enter(el, done) { // 动画进入完成时候的回调       el.offsetWidth;  //这句话没有实际的作用，但是，如果不写，出不来动画的效果；可以认为el.offsetWidth会强制动画刷新       el.style.transform = 'translateX(0px)';       done(); //这里的done其实是afterEnter这个函数，也就是说done是afterEnter函数的引用     },     afterEnter(el) { // 动画进入完成之后的回调	  //这句话的意思是：控制小球的显示隐藏、直接跳过后半场动画，让flag变化       this.isshow = !this.isshow;     }   }复制代码

• 定义动画过渡时长和样式：

.show{  transition: all 0.4s ease; }复制代码

点击按钮动画是从最初的位置开始而不是动画结束的位置开始，因为每次动画执行完动画的生命周期就结束了。又进入了下一个动画的生命周期

4、列表动画

https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1

• 定义过渡样式

复制代码

• 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

    
	
     	
        
          
      
{
   {item}}
   
      
    
复制代码

给transition-group添加appear属性，实现页面刚展示的时候，入场的效果。 通过为transition-group元素设置tag属性，指定transition-group渲染为指定的元素，不指定的话会渲染为span标签。span标签包裹li标签不符合css标准

• 列表离开时的样式——组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

/*v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：*/.v-move{  transition: all 0.8s ease;}.v-leave-active{  position: absolute;}复制代码