7.css动画：animate库

1.方式一

步骤一：打开浏览器:https://www.bootcdn.cn/

步骤二：输入animate，打开animate.css

步骤三：选择3.7.0版本的/animate.css，点击"复制链接"，打开网址，将里面的内容复制到本地

步骤四：引入该css

import animate from './animate.css'
<template>
    <div>
        <div class="animated bounce" v-show="isShow">css动画</div>
        <transition enter-active-class="animated jello" leave-active-class="animated tada">
            <div v-show="isShow">css动画</div>
        </transition>
        <button @click="change">切换</button>
    </div>
</template>

 

2.方式二

步骤一：打开浏览器:https://v2.cn.vuejs.org/v2/guide

步骤二：选择"过渡&动画"

步骤三：将其中css内容复制出来

<template>
    <div>
        <transition name="fade">
            <div v-show="isShow">css动画</div>
        </transition>
        <button @click="change">切换</button>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
          transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
</style>

 

3.应用：添加/删除循环动画

<template>
    <div>
        <el-button type="primary" plain @click="round">添加循环动画</el-button>
        <el-button type="success" plain @click="remove">移除</el-button>
        <div id="box"></div>
    </div>
</template>
<script>
    export default{
        methods:{
            round(){
                document.getElementById('box').classList.add('animated');
                document.getElementById('box').classList.add('flash');
                document.getElementById('box').classList.add('infinite');
            },
            remove(){
                document.getElementById('box').classList.remove('flash')
            }
        }
    }
</script>
<style>
    #box{
        background: rgba(240, 176, 224,0.8);
        width: 125px;
        height: 125px;
    }
</style>