Vue.js 相关知识（动画）

Vue 在插入、更新或移除 DOM 时，提供多种不同方式的过渡效果，并提供 transition 组件来实现动画效果（用 transition 组件将需执行过渡效果的元素包裹）

语法：元素或组件（进入或离开时会有动画效果）

name 属性是执行动画效果的 css 类名，与6个 css 类产生关联：

假设 transition 的 name为v，transition 组件会自动在不同时机添加如下6个类：

• v-enter：定义过渡开始状态的样式
  

• v-enter-active：定义过渡的状态，该类常被用来定义过渡的过程时间、延迟、曲线函数。

• v-enter-to：定义过渡结束状态的样式（vue 2.1.8以上版本）
  

• v-leave：定义离开之前的样式

• v-leave-active：定义从0到1过程中的样式

• v-leave-to：定义到达目的地之后的效果

动画只在2个节点发生：

• 进入：从不显示到显示（v-show），从无到有。

• 离开：从显示到不显示（v-show），从有到无。

条件渲染（使用v-if）：根据条件控制元素添加、删除

条件展示（使用v-show）：根据条件控制元素显示、隐藏

动态组件（使用:is）：多个组件切换（涉及到组件显示、隐藏）

    
    
        
    
        .v-enter{opacity: 0}
        .v-enter-to{opacity: 1}
        .v-enter-active{transition: all 1s}
        .v-leave{opacity: 1}
        .v-leave-to{opacity: 0}
        .v-leave-active{transition:all 1s}
    
    
        
            标题
        
        
            
                
内容
            
        
    
    

可将中的内容简化为：

　　.v-enter,.v-leave-to{opacity: 0}　　.v-enter-active,.v-leave-active{transition: all 1s}

• 若给一个元素绑定动画效果，使用组件

• 若给多个元素绑定动画效果，使用组件

为了区分元素列表，需要给子元素增加:key属性，表示每个子元素的索引

语法： <元素1 :key=””> <元素2 :key=””>

除在 transition 组件上增加 name 属性，来实现动画效果外，Vue还提供6个内置的类，可直接在transition组件上使用（为了兼容 animate.css 框架）

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

• enter-class：相当于.v-enter
  

• enter-active-class：相当于.v-enter-active

• enter-to-class：(2.1.8之后)

• leave-class

• leave-active-class

• leave-to-class：(2.1.8之后)

例：结合vue.js和animate.css动画框架实现一些动态效果

注：无需指定开始、结束状态时的css样式（animate.css中已指定）

    
    
    
        
    
        .dialog{
            width: 300px;
            height: 300px;
            background: #333;
            color: #fff;
        }
    
    
        按钮
        
            内容
        
    
    

先指定不同阶段执行的js函数，在该函数中实现该阶段的css动画（通常结合 velocity.js、move.js 等Javascript动画框架实现）。在钩子函数中，会自动将执行过渡效果的元素传递到钩子函数中。

语法：

例子：

    
    
    
        
    
        .dialog{
            width: 300px;
            height: 300px;
            background: #333;
            color: #fff;
        }
    
    
        按钮
        
            内容
        
    
    

原文出处