51Vue 通过调用第三方库动画实现

Vue 通过调用第三方库动画实现

1.animate.css

animate.css动画库，通过调用内部定义好的属性方法从而实现动画效果。

1.安装animate.css库

npm install animate.css

2.导入animate.css库

import 'animate.css'

基本用法

安装 Animate.css后，将类与任何动画名称一起添加到元素中（不要忘记前缀！animate__animated``animate__）

<h1 class="animate__animated animate__bounce">An animated element</h1>

Vue中使用animate.css

vue中标签使用的属性

 Vue 使用animate.css
 	- 导入：import 'animate.css';
 	- 使用属性：name="animate__animated animate__bounce"
        - 选用属性：
            - enter-active-class
            - leave-active-class
            ...

实例

<template>
    <div>
        <h2>通过调用第三方库动画实现</h2>
        <button @click="isShow = !isShow">点击变化</button>
        <transition-group 
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
        >
            <h1 v-show="!isShow" key="1">你好tom！</h1>
            <h1 v-show="isShow" key="2">你好aelx！</h1>
        </transition-group>
    </div>
</template>

<script>
    import 'animate.css';
    export default {
        name:'Test',
        data() {
            return {
                isShow: true,
            }
        }
    }
    </script>

<style scoped>
    h1{
        background-color:yellow;
    }
</style> 

---

animate.css官网地址：动画.css |CSS 动画的跨浏览器库。 (animate.style)