Vue学习:动画

动画：使用过度类名实现动画

• v-enter
  这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入
• v-leave-to
  是一个时间点，是动画离开之后，离开的终止状态，此时 元素 动画已经结束了
• .v-enter-active
  入场动画的时间段
• .v-leave-active
  离场动画的时间段

可自定义前缀

给transition 添加一个name属性

demo:

    
    
    
    



    
    
        
测试啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    

案例：vue-resource改造品牌列表

    
    
    
    
    





    

    

        
添加品牌
    
    
    

        Name
        
        
        
    

    

        

        

            
ID
            
Name
            
Ctime
            
Operation
        
        
        

        

            
{{item.id}}
            
{{item.name}}
            
{{item.ctime}}
            

                删除
            
        
        
    

使用第三方类实现动画

• 使用：duration="毫秒值"来统一设置 入场 和 离场 时候的动画时长
• 使用:duration={enter:200,leave:400} 来分别设置入场的时长 和 离场 的时长

    
    
    
    



    
    
    
    
        
动画动画动画动画动画动画动画
    

案例：使用钩子函数模拟小球半场动画

• 注意：动画钩子函数的第一个参数：el 表示要执行动画的那个DOM元素，是个原生的JS DOM对象

• beforeEnter
  表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式

• enter
  表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态

• afterEnter
  动画完成之后，会调用 afterEnter

列表动画

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

    
    
    
    



    

        ID:
            
        
        Name
            
        
        
    
    
    
    
        

            {{item.id}}====={{item.name}}