vue css过渡动画与 Animate动画库

1、css过渡动画使用

在vue中使用css过渡动画，一方面需要transition元素，另一方面还要用到6个过渡类名，它们分别为v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active和v-leave-to，enter表示动画从0开始淡入，直到1完全显示，leave表示从1开始淡出，直到变成0完全消失。下面是官网的效果图

新建一个MyAnimate.vue组件，并定义一个渐变动画效果，给transition 元素中name属性值绑定css样式即可

<template>
    <div>
        css动画效果
        <button @click="show = !show" >点击切换</button>
        <transition name="fade">
            <p v-if="show">渐变动画效果</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "MyAnimate",
        data(){
            return{
                show:true
            }
        }
    }
</script>

<style scoped>
  /* enter：0~1  leave：1~0 */

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to,
  .fade-leave {
    opacity: 1;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 2s;
  }
</style>

点击按钮查看渐变效果

2、 Animate动画库使用

我们这里使用的swiper官网的Animate库，它有很多种效果供我们选择

定义MyAnimate.vue组件，这里主要两点，一个是在transition元素中指定淡入效果（enter-active-class属性）和淡出效果（leave-active-class属性），第二个导入animate.css样式表，官网推荐版本为3.5.1，这里我们先使用的cdn导入，然后就可以查看动态效果了。

<template>
    <div>
        css动画效果
        <button @click="show = !show" >点击切换</button>
        <transition
          name="custom-classes-transition"
          enter-active-class="animated rotateOutDownLeft"
          leave-active-class="animated rollOut"
        >
          <p v-if="show">渐变动画效果</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "MyAnimate",
        data(){
            return{
                show:true
            }
        }
    }
</script>

<style scoped>
@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";
</style>

如果需要本地引入，则需要先到项目路径下安装animate.css插件，执行命令npm install animate.css@3.5.1 --save

D:\3.dev\ideaworkspace\web\vue>cnpm install animate.css@3.5.1 --save
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 2s(network 2s), speed 11.7kB/s, json 1(1.56kB), tarball 22.98kB)

然后再导入本地样式表即可（需要注意相对路径，建议放到App.vue中）

<style scoped>
@import "../../node_modules/_animate.css@3.5.1@animate.css";
</style>