iT邦幫忙

1

Vue 動畫 學習筆記

今天我要分享如何用Vue寫出簡單動畫效果。

CSS動畫

Vue提供transition的tag,可增加載入時的漸變效果
mode為動畫模式(out-in淡出淡入)。
appear為載入時就開始進動畫。
name為我們定義class的前綴詞,預設為v。

我們利用v-for用來獲取並渲染menu中的資料,由於一次只要顯示一筆,所以利用v-if來做判斷,只要顯示當前等於下標的資料。
而:key的部分,是須加上key否則動畫出不來,這樣vue才能識別。


                        <transition
                            name="fade"
                            mode="out-in"
                            appear
                        >
                            <div
                                class="menuItem white"
                                style="transform:scale3d(1.5,1.5,1)"
                                v-for="(item,i) in menu"
                                v-if="index === i"
                                :key="item.title"
                            >
                                <span class="number">{{ i+1 }}</span>
                                <span class="type">{{ item.type }}</span>
                                <a
                                    class="title"
                                    target="vue-iron"
                                    :href="item.link"
                                >{{ item.title }}</a>
                            </div>
                        </transition>

最後,我們需在class的部分加上動畫需要的class,以讓transition中的name="fade"來獲取動畫。
此圖from:https://www.youtube.com/watch?v=hqfRJsQ2vxY&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=9 之影片片段。

https://ithelp.ithome.com.tw/upload/images/20200715/20126182dxP9RxDO1b.png

v(預設)可自行取名
v-enter為準備進場的狀態。
v-enter-active為進場中的狀態。
v-enter-to進場結束的狀態(基本上不會去動)。
v-leave為準備離場的狀態
v-leave-active為離場中的狀態
v-leave-to離場結束的狀態(基本上不會去動)


        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 1s;
        }

JQuery動畫

除了使用Vue提供的方法,做出純Css動畫,利用Vue所提供的一些事件,搭配程式也可以做出Css動畫。

Vue提供的事件如 before-enter before-leave before-appear...為transition的HOOK函式。

此圖from:https://www.youtube.com/watch?v=hqfRJsQ2vxY&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=9 之影片片段。

https://ithelp.ithome.com.tw/upload/images/20200715/201261826KIxP7eafH.png

一樣加在transition中,而原本的name="fade"可以移除,此外,我們還需要綁一個css屬性為false,可以忽略其他CSS,以程式(hook)為主

                       <transition
                            @before-enter="beforeEnterHandler"
                            @enter="enterHandler"
                            @after-enter="afterEnterHandler"
                            @enter-cancelled="afterEnterHandler"
                            @before-leave="beforeleaveHandler"
                            @leave="leaveHandler"
                            @after-leave="afterleaveHandler"
                            @leave-cancelled="afterleaveHandler"
                            mode="out-in"
                            :css="false"
                            appear
                        >
                       ...

在程式的部分,利用JQuery參數e直接可以指向我們做動畫的DOM,並css,animate做樣式操作,而在animate中有一個參數為done,可用來判斷是否完成動畫。

   let data = { ...

   let vm = new Vue({
            el: '#app',
            data: data,
            computed: {
                today() {
                    return this.menu[this.index]
                },
                total() {
                    return this.menu.length
                }
            },
            methods: {
                changeIndex(change) {
                    this.index = (this.index + change + this.total) % this.total
                },
                beforeEnterHandler(e) {
                    $(e).css({
                        opacity: 0
                    })
                },
                enterHandler(e, done) {
                    $(e).animate({
                        opacity: 1
                    }, 1000, done)
                },
                // 跑完動畫後,將殘留在DOM上的樣式清除
                afterEnterHandler(e) {
                    $(e).css({
                        opacity: ''
                    })
                },
                beforeleaveHandler(e) {
                    $(e).css({
                        opacity: 1
                    })
                },
                leaveHandler(e, done) {
                    $(e).animate({
                        opacity: 0
                    }, 1000, done)
                },
                afterleaveHandler(e) {
                    $(e).css({
                        opacity: ''
                    })
                }
            }
        });

另外,Alex大大在影片中有提到,當寫到框架時,就應減少自己去讀取DOM的機會


尚未有邦友留言

立即登入留言