Vue中過渡與動畫

1.元素的顯示與隱藏，實現過渡動畫效果

（1）為目標元素添加一個父元素 transition，並添加name屬性  

      在目標元素中添加v-show=“isShow”  isShow為Vue中的data

    添加button按鈕控制“isShow的值

    <div id="demo">
        <button @click="isShow = !isShow">點擊這里變色</button> 
<transition name="isd">
 <div v-show="show" id="box">哈哈</div> 
</transition> 
</div>

<script>

        new Vue({

            el: "#demo",

            data: {

             isShow:true 

            },

            methods: {

            

            }

        })

    </script>

(2)在style中添加樣式

.xxx-enter-active 顯示過程的效果

.xxx-leave-active  隱藏過程的效果

.xxx-enter  顯示前的效果

.xxx-enter-to  顯示后的效果

.xxx-leave   隱藏前的效果

.xxx-leave-to   隱藏后的效果

xxx 代表transition 標簽中的name屬性值

.isd-enter-active,.isd-leave-active{
        transition: all 5s;
    }
    .isd-enter,.isd-leave-to{
        opacity: 0;
        transform: translateX(100px);
    }

 2.自定義動畫

（1）dom元素和Vue中與上述顯示隱藏一樣

<div id="demo">
        <button @click="show = !show">點擊這里</button>

        <transition name="box">
        <p v-show="show" >哈哈哈哈</p>
        </transition>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
              show:true 
            },
            methods: {
            

            }
        })
    </script>

 

（2）自定義動畫使用  

定義動畫    @keyframes 動畫名稱{  0% {}    50%{}    100%{} }  在花括號中 以百分數表示各個階段的動畫

使用動畫   .xxx-enter-active,.xxx-leave-active{ animation: 動畫名稱 時間;}       xxx 代表transition 標簽中的name屬性值

.box-enter-active,.box-leave-active{
        animation: scale 10s;
    }
    @keyframes scale {
    0%{
    transform: scale(0);
    }
    50%{
    transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}