Vue动画

vue动画

1. vue不能直接实现动画,只提供动画各阶段需要的class

2. <transition>组件提供class

3. 在vue中,动画是在元素显示与隐藏的过程中,添加class实现的

• v-if

• v-else

• v-show

4. transition组件提供

• v-enter-active
  元素整个进入的过程

• v-enter
  元素进入的初始状态

• v-enter-to
  元素进入的结束状态

• v-leave-active
  元素的离开结束状态

• v-leave
  元素的离开初始状态

• v-leave-to
  元素的离开结束状态

5. transition-group组件

• tag 指定标签

• move-class
  给正在移动中的元素添加class

• name 动画名称

• enter-active-class
  leave-active-class
  指定进入离开class

自定义动画名

• enter-active-class="xxx"

• leave-active-class="xxx"

动画模式 mode

• in-out
  先执行进入动画,再执行离开动画

• out-in
  先执行离开,再执行进入动画

组件

定义

• 1. 组件就是扩展自定义 的html标签
• 2. 组件是一个功能的集合，可以重复的使用
• 3. 组件能使一个复杂的系统分割为一些简单的组件
• 4. 组件使前端分工协作更加方便
• 5. 组件在小项目中会显得复杂，项目越大，优势越明显

全局

Vue.component(组件名,{
    template:`<div>组件的模板里面只能够有一个根组件</div>`
})

局部

1. 定义组件

let counter = {
    template:`<div>组件的模板里面只能够有一个根组件</div>`,
    data:function(){return {num:1,}},
    methods:{}
}

2. 注册组件

new Vue({
    components:{
        counter
    }
})

3. 使用组件

<counter></counter>