Vue中transition和animation的使用

一：二者的對比

1.動畫循環就用animation。在animation中有一個animation-iteration-count屬性可以定義循環次數。transition是執行一次以后就不會執行，但是可以通過transitionEnd事件添加循環，與animation相比animation更加簡單明了。

2.自動觸發用animation。當頁面中的動畫是自己執行的那么我們考慮用animation，因為transition是需要借助偽類、js、@madia觸發的。常見的偽類是：hover ，：focus。 常見的js就比如click事件。@media可以用於頁面縮小到1000px你可以展示你需要的動畫。

3.復雜的動畫用animation。在遇到很復雜的動畫那就用animation。因為animation可以定義關鍵幀。那你就可以控制每一幀的動畫效果。簡單的動畫效果可以用transition，里面有transition-timing-function屬性可以展示動畫的速度效果。

二.用transition實現Vue動畫

1.在目標元素外包裹<transition name="xxx">

<div id="test">
    <button @click="isShow=!isShow">toggle</button>
   <transition name="xxx">
       <p v-show="isShow">hello</p>
   </transition>
</div>

2.定義class樣式

指定過渡樣式

 /*顯示、隱藏時的過渡效果*/
        .xxx-enter-active,.xxx-leave-active{
            transition: opacity 1s;
        }

 

隱藏樣式

/*隱藏時的樣式*/
        .xxx-enter,.xxx-to{
            opacity: 0;
        }

transition和animation的用法基本相同，但一般在項目中transition用的以較多

.xxx-enter-active{
            animation: bounce-in .5s;
        }
        .xxx-levave-active{
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            10%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }