Animate.css

介绍

Animate.css 是一个外部的动画包，内部集成了很多动画样式，可通过 npm 安装。

使用

2. Animate.css 官网

3. 安装

   npm i animate.css

4. 在需要动画的组件中引入 Animate.css

<script>
    import "animate.css"
    
    export default {
        name: 'Demo0',

        data() {
            return {
                
            };
        },
    };
</script>

5. 在组件中画一个 <transition-group> 标签，用 <transition-group> 标签将需要动画的标签包裹起来，标签的 name 属性为 animate__animated animate__bounce。注意， <transition-group> 内每个标签都要使用 key 做标识。

   <transition name="animate__animated animate__bounce">
   		<h1 key="1">Hello</h1>
   </transition>

6. <transition-group> 标签进入动画配置项： enter-active-class，属性值需要去 Animate.css 官网 官网上选。

7. <transition-group> 标签离开动画配置项： leave-active-class，属性值同上。

代码实现

<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__jackInTheBox"
            leave-active-class="animate__rollOut"
        >
            <h1 key="1" v-if="isShow">Hello</h1>
        </transition>
    </div>
</template>

<script>
    import "animate.css"

    export default {
        name: 'Demo0',

        data() {
            return {
                isShow: true
            };
        },
    };
</script>

<style scoped>
    h1 {
        width: 120px;
        height: 40px;
        color: white;
        text-align: center;
        line-height: 40px;
        background-color: orange;
    }
</style>