2、 在Vue2.0版本中改变成了由 transition特性的写法变成了 <transition></transition>的写法
[JavaScript] 纯文本查看 复制代码
<transition name="fade">
<p v-if="show">hello</p>
</transition>
transition通常与下面指令结合在一起使用：
- v-if
- v-show
1.0.2 Vue中过渡动画的几种常用写法
- 利用css控制过渡动画
- Vue1.0写法
- Vue2.0写法
- 利用animate.css控制过渡动画
- Vue1.0写法
- Vue2.0写法
- 利用钩子函数控制过渡动画
- Vue1.0 过渡动画API文档：http://v1-cn.vuejs.org/guide/transitions.html
- Vue2.0 过渡动画API文档：http://cn.vuejs.org/v2/guide/transitions.html
- Vue1.0钩子函数
1、过渡动画进入
[JavaScript] 纯文本查看 复制代码
beforeEnter:function(el){} 过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
enter:function(el,done){} 过渡动画进入中，在这个方法中定义目标元素的结束位置
afterEnter:function(el){} 过渡动画结束后，通常在这个方法里面重置初始值
enterCancelled:function(el){} 取消过渡动画时被调用
2、过渡动画离开
[JavaScript] 纯文本查看 复制代码
beforeLeave:function(el){} 动画离开之前触发
leave:function(el){} 过渡动画进入中触发
afterLeave:function(el){} 过渡动画离开结束后
leaveCancelled:function(el){} 取消过渡动画时被调用
3、使用示例：
- Vue2.0钩子函数
1、过渡动画进入
[JavaScript] 纯文本查看 复制代码
before-enter 过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
enter 过渡动画进入中，在这个方法中定义目标元素的结束位置
after-enter 过渡动画结束后，通常在这个方法里面重置初始值
enter-cancelled 取消过渡动画时被调用
2、过渡动画离开
[JavaScript] 纯文本查看 复制代码
before-leave 动画离开之前触发
leave 过渡动画进入中触发
after-leave 过渡动画离开结束后
leave-cancelled 取消过渡动画时被调用
3、使用示例：
2.0 Vue组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 
