VUE动画

vue动画的声明周期

步骤

• 使用 transition 元素，把需要被动画控制的元素，包裹起来；
• 自定义两组样式，来控制 transition 内部的元素实现动画。

  
  
  
  
  
  



  

    
    
    
        
这是一个H3
    
  

  

自定义动画，修改v前缀

在需要自定的动画的元素添加一个name属性
样式设置v-改为name属性值-

  
  
  
  
  
  



  

    
    
      
这是一个H3
    
    


    
    
      
这是一个H6
    
  

  

使用动画钩子函数

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

    
    
      
OK
    
  

定义三个 methods 钩子方法：

methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }

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

.show{
      transition: all 0.4s ease;
    }

案例：添加进购物车动画

v-for列表动画

• 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup
• 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性
• 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

  
  
  
  
  
  


  


    

      
        Id:
        
      

      
        Name:
        
      

      
    
    
      
      
        

          {{item.id}} --- {{item.name}}
        
      
    
  

  

列表的排序过渡：

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

appear

给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果，也就是设置节点的在初始渲染的过渡

 
        

          {{item.id}} --- {{item.name}}
        
  

使用CSS库

通过自定义过度类名可以有效结合Animate.css这类动画库制作更精美的动画效果。
步骤：
（1）引入animate.css

(2)transition设置