vue2.0 transition使用例子-单个例子

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
- Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
  包括以下工具：
  - 在 CSS 过渡和动画中自动应用 class
  - 可以配合使用第三方 CSS 动画库，如 Animate.css
  - 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  - 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

 1 html(lang="en")
 2     head
 3         meta(charset="UTF-8")
 4         meta(name="viewport", content="width=device-width, initial-scale=1.0")
 5         meta(http-equiv="X-UA-Compatible", content="ie=edge")
 6         script(src="../framework/vue/vue.js")
 7         title transitions
 8         style.
 9          input{
10              100px;
11              height:50px;
12          }
13          p{
14              height:200px; 200px;border:1px solid red;
15          }
16             /* 可以设置不同的进入和离开动画 */
17             /* 设置持续时间和动画函数 */
18             .meteor-enter-active {/*进入的时候执行*/
19             transition: all .3s ease;
20             }
21             .meteor-leave-active {/*离开的时候执行*/
22             transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
23             }
24             .meteor-enter, .meteor-leave-to
25             /* .slide-fade-leave-active for below version 2.1.8 */ {/*进入初始状态 和 离开初始状态*/
26             transform: translateX(50px);
27             opacity: 0;
28             }
29     body
30      div#example
31       input(type="button",value="GO",@click="show = !show")
32       //- name的名字可以自己取 和CSS一样 改变前面就可以了
33       transition(name="meteor",
34                 @before-enter="beforeEnter",
35                 @enter="enter",
36                 @after-enter="afterEnter",
37                 @enter-cancelled="enterCancelled",
38                 @before-leave="beforeLeave",
39                 @leave="leave",
40                 @after-leave="afterLeave",
41                 @leave-cancelled="leaveCancelled")
42        p(v-if="show") 
43 
44 
45     script.
46         new Vue({
47             el: '#example',
48             data: {
49                 show: true
50             },
51             methods:{
52                 //进入中
53                 beforeEnter(el){
54                      console.info('进入动画执行之前')
55                 },
56                 enter(el,done){
57                      console.info('进入动画执行')
58                      console.info(done)
59                 },
60                 afterEnter(el){
61                      console.info('进入动画执行之后')
62                 },
63                 enterCancelled(el){
64                      console.info('???')
65                 },
66                 //离开
67                 beforeLeave(el){
68                      console.info('离开执行之前')
69                 },
70                 leave(el){
71                      console.info('离开执行')
72                 }, 
73                 afterLeave(el){
74                      console.info('离开执行之后')
75                 }, 
76                 leaveCancelled(el){
77                      console.info('？？？')
78                 },
79             }
80         })