1. 程式人生 > >vue的動畫組件(transition)

vue的動畫組件(transition)

pri span title cancel href 我們 匹配 導航 cnblogs

當插入或刪除包含在 transition 組件中的元素時,Vue 將會做以下處理:

自動嗅探目標元素是否應用了 CSS 過渡或動畫,如果是,在恰當的時機添加/刪除 CSS 類名。

v-enter: 定義進入過渡的開始狀態。在元素被插入時生效,在下一個幀移除。
v-enter-active: 定義過渡的狀態。在元素整個過渡過程中作用,在元素被插入時生效,在 transition/animation 完成之後移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數。
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀後生效(於此同時 v-enter 被刪除),在 transition/animation 完成之後移除。
v-leave

: 定義離開過渡的開始狀態。在離開過渡被觸發時生效,在下一個幀移除。
v-leave-active: 定義過渡的狀態。在元素整個過渡過程中作用,在離開過渡被觸發後立即生效,在 transition/animation 完成之後移除。 這個類可以被用來定義過渡的過程時間,延遲和曲線函數。
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效(於此同時 v-leave 被刪除),在 transition/animation 完成之後移除。

配合上css的動畫庫,我們會有很好的效果:https:[email protected]/animate.min.css"

demo01:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"  type="text/javascript"></script>
        <link href="https:[email protected]/animate.min.css" rel="stylesheet" type="
text/css"> </head> <body> <div id="app4"> <button @click="show = !show">toggle coustom class</button> <transition name="bounce" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <p v-if="show">自定義過渡類名</p> </transition> </div> </body> </html> <script> new Vue({ el:#app4, data:{ show:true } }) </script>

對於這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴。使用
<transition name="my-transition" 可以重置前綴,比如 v-enter 替換為 my-transition-enter。

demo02

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"  type="text/javascript">
        </script>
        <script src="../lib/vue_router.js"></script>
        <style>
            .fade-enter-active,.fade-leave-active{
                transition: all .3s;
                
            }
            .fade-enter,.fade-leave-to{
                opacity:0
            }
            
            .style-enter-active,.style-leave-active{
                transition: all .3s;
                
            }
            .style-enter,.style-leave-to{
                opacity:0
            }
        </style>
    </head>
    <body>
        <div id="app">
              <h1>Hello App!</h1>
              <p>
                <!-- 使用 router-link 組件來導航. -->
                <!-- 通過傳入 `to` 屬性指定鏈接. -->
                <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽(默認),你也可以改變 -->
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/bar">Go to Bar</router-link>
                <router-link to="/foo/ff">Go to foo ff</router-link>   
              </p>
              <!-- 路由出口 -->
              <!-- 路由匹配到的組件將渲染在這裏 -->              
            <!---name="fade" fade成為類名的前綴(我們也可以進行自定義)---->
            <!--<transition name="fade" mode="out-in">
                  <keep-alive>
                        <router-view></router-view>
                  </keep-alive>
            </transition>
            -->            
            <transition name="style" mode="out-in">
                <!--transition是vue的動畫組件,會自動監聽其中元素得狀態改變,為其--->
                <router-view></router-view>
            </transition>            
        </div>
    </body>
</html>
<script>
    // 1. 定義(路由)組件。
    // 可以從其他文件 import 進來
    const Foo = { template: <div>foo</div> }
    const Bar = { template: <div>bar</div> }
    const Foo_ff={template: <p>foo_ff</p>}
    // 2. 定義路由
    // 每個路由應該映射一個組件。 其中"component" 可以是
    // 通過 Vue.extend() 創建的組件構造器,
    // 或者,只是一個組件配置對象。
    // 我們晚點再討論嵌套路由。
    const routes = [
       { path: /foo, component: Foo },
       { path: /foo/ff, component: Foo_ff },
       { path: /bar, component: Bar },
    ]
    
    // 3. 創建 router 實例,然後傳 `routes` 配置
    // 你還可以傳別的配置參數, 不過先這麽簡單著吧。
    const router = new VueRouter({
      routes // (縮寫)相當於 routes: routes

    })
    
    // 4. 創建和掛載根實例。
    // 記得要通過 router 配置參數註入路由,
    // 從而讓整個應用都有路由功能
    const app = new Vue({
      router
    }).$mount(#app)    
     
</script>

如果過渡組件提供了 JavaScript 鉤子函數,這些鉤子函數將在恰當的時機會被自動調用。
如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫,DOM 操作(插入/刪除)在下一幀中立即執行。

v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">

鉤子函數配合velocity.js動畫使用,來完成動畫效果,感覺不錯(並且js動畫相比css動畫的好處,我不知道,好像可以百度到)

https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js

http://velocityjs.org/#reverse

demo

<!--http://velocityjs.org/#reverse-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"></script>
    </head>
    <body>
        <div id="app5">
            <button @click="show = !show">toggle hook</button>
            <transition @before-enter="beforeEnter"
                        @enter="enter"
                        @leave="leave"
                      :css="false">
                    <p v-if="show">javascript 鉤子使用</p>
            </transition>
        </div>
    </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
    el:#app5,
    data:{
        show:false
    },
    methods:{
        beforeEnter:function (el) {
            console.log(el);
            alert("beforeEnter");
            el.style.opacity = 0
            el.style.transformOrigin = left
        },
        enter:function (el, done) {
            alert("enter");
        //    console.log(done);
            Velocity(el, {opacity:1, fontSize:1.4em}, {duration:300});
            Velocity(el, {fontSize:1em}, {complete:done});
            Velocity(el,"reverse", { duration: 6000 });
            Velocity(el,{
                        borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
                     width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
                        height: "100px" // Defaults to easeInSine, the call‘s default easing
                    }, {
                            easing: "easeInSine" // Default easing
                    });
        },
        leave:function (el, done) {
            Velocity(el, {translateX:15px, rotateZ:50deg}, {duration:600})
            Velocity(el, {rotateZ:100deg}, {loop:2})
            Velocity(el,{
                rotateZ:45deg,
                translateY:30px,
                translateX:30px,
                opacity:0
            }, {complete:done})
        }
    }
})
</script>

參考:http://www.chairis.cn/blog/article/27

vue的動畫組件(transition)