vue----07

 1、vue中的css动画原理

<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
   
   <button @click="handleBtnClick">切换</button>
</div>

<script>
    var vm  = new Vue({
        el:"#root",
        data: {
            show: true
        },
        methods: {
            handleBtnClick:function () {
                this.show = !this.show
              }
        }
    
    })
</script>
<style>
　　.fade-enter{ //可简写为v-enter
　　　　opacity: 0　　
　　}
　　.fade-enter-active{
　　　　transition: opacity 3s;
　　}
</style>

如上代码所示，transition包裹的div将具有动画效果

 

 

2、在vue中使用Animate.css库

<style>
    @keyframes bounce-in{
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
    .active{
        transform-origin: left center ;
        animation: bounce-in 1s; 
    }
    .leave {
        transform-origin: left center;
        animation: bounce-in 1s reverse;
    }
</style>

<div id="root">
    <transition 
        name="fade"
        enter-active-class="active"
        leave-active-class="leave"
    >
        <div v-if="show">hello world</div>
    </transition>
   
   <button @click="handleBtnClick">切换</button>
</div>

<script>
    var vm  = new Vue({
        el:"#root",
        data: {
            show: true
        },
        methods: {
            handleBtnClick:function () {
                this.show = !this.show
              }
        }
    
    })
</script>

使用animate.css库

<!-- 引入animate.css库 -->

<div id="root">
    <transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
    >
        <div v-if="show">hello world</div>
    </transition>
   
   <button @click="handleBtnClick">切换</button>
</div>

<script>
    var vm  = new Vue({
        el:"#root",
        data: {
            show: true
        },
        methods: {
            handleBtnClick:function () {
                this.show = !this.show
              }
        }
    
    })
</script>

3、vue中同时使用过渡和动画

第一次显示无动画问题：

<div id="root">
    <transition 
        name="fade"
        appear
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
    >
        <div v-if="show">hello world</div>
    </transition>
   
   <button @click="handleBtnClick">切换</button>
</div>

 

同时使用过渡和动画

<!-- 引入animate.css库 -->
<style>
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 3s;
    }
</style>
<div id="root">
    <transition 
        type="transition" //此处指动画时长以transition为准
        :duration="10000 or {enter: 5000,leave: 10000}" //此处指自定义动画时长，与上一属性相斥，单位为毫秒
        name="fade"
        appear
        enter-active-class="animated swing fade-enter-active"
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated swing"
    >
        <div v-if="show">hello world</div>
    </transition>
   
   <button @click="handleBtnClick">切换</button>
</div>