Vue07---vue中的css动画原理及animate.css使用

 

目录

一、transition过渡动画原理

 二、使用keyframes关键帧

 三、在vue中使用animate.css

 同时使用过渡和动画

---

一、transition过渡动画原理

当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。

在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。

tip:

transition上的name是起了个名字，不加name属性后续的vue增加的样式就是v-enter和v-enter-active

在动画隐藏的过程中原理如下：

流程和上诉显示过程一样

 

代码例子如下

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

<script scoped>
export default {
  name: 'BaseAnimate',
  data () {
    return {
      show: true
    }
  },
  methods: {
    change () {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition: opacity 1s;
  }
</style>

效果：

 二、使用keyframes关键帧

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

<script>
export default {
  name: 'keyframes',
  data () {
    return {
      show: true
    }
  },
  methods: {
    change () {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
   }
    50% {
      transform: scale(1.5);
   }
    100% {
      transform: scale(1);
   }
  }
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可
  .fade-enter-active{
    transform-origin: left center;
    animation: bounce-in 1s;
  }
  .fade-leave-active{
    transform-origin: left center;
    animation: bounce-in 1s reverse;
  }
</style>

//也可以使用from to 相当于0%-100%
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

效果

 三、在vue中使用animate.css

首先使用npm安装animate.css

npm install animate.css --save

 然后在mian.js里引入

import animate from 'animate.css' 
Vue.use(animate)

代码如下：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。具体效果可查看官网文档animate.css动画演示_dowebok

必须使用enter-active-class和leave-active-class

<transition name="fade"
                    enter-active-class="animated swing "
                    leave-active-class="animated shake "
        >
            <div v-if="show">hello world</div>
</transition>

效果：

 同时使用过渡和动画

在enter-active-class后加入自定义的过渡动画

<transition name="fade"
                    type="transition"
                    :duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-class="animated swing"
        >
<!--          type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!--          appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!--         :duration="5000" 自定义动画时长 在此结束后才移除class-->
            <div v-if="show">hello world</div>
</transition>
<style scoped>
 .fade-enter,.fade-leave-to {
        opacity: 0;
    }
    .fade-enter-active {
        transform-origin: left center;
        transition: opacity 1s;
    }
    .fade-leave-active {
        transform-origin: left center;
        transition: opacity 1s;
    }
</style>