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

html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        script(src="../framework/vue/vue.js")
        title transitions
        style.
         input{
             100px;
             height:50px;
         }
         p{
             height:200px; 200px;border:1px solid red;
         }
            /* 可以设置不同的进入和离开动画 */
            /* 设置持续时间和动画函数 */
            .meteor-enter-active {/*进入的时候执行*/
            transition: all .3s ease;
            }
            .meteor-leave-active {/*离开的时候执行*/
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            }
            .meteor-enter, .meteor-leave-to
            /* .slide-fade-leave-active for below version 2.1.8 */ {/*进入初始状态 和 离开初始状态*/
            transform: translateX(50px);
            opacity: 0;
            }
    body
     div#example
      input(type="button",value="GO",@click="show = !show")
      //- name的名字可以自己取 和CSS一样 改变前面就可以了
      transition(name="meteor",
                @before-enter="beforeEnter",
                @enter="enter",
                @after-enter="afterEnter",
                @enter-cancelled="enterCancelled",
                @before-leave="beforeLeave",
                @leave="leave",
                @after-leave="afterLeave",
                @leave-cancelled="leaveCancelled")
       p(v-if="show") 


    script.
        new Vue({
            el: '#example',
            data: {
                show: true
            },
            methods:{
                //进入中
                beforeEnter(el){
                     console.info('进入动画执行之前')
                },
                enter(el,done){
                     console.info('进入动画执行')
                     console.info(done)
                },
                afterEnter(el){
                     console.info('进入动画执行之后')
                },
                enterCancelled(el){
                     console.info('???')
                },
                //离开
                beforeLeave(el){
                     console.info('离开执行之前')
                },
                leave(el){
                     console.info('离开执行')
                }, 
                afterLeave(el){
                     console.info('离开执行之后')
                }, 
                leaveCancelled(el){
                     console.info('？？？')
                },
            }
        })