vue中过渡动画使用animate.css动画库版本v4.0

最新推荐文章于 2024-08-12 11:00:42 发布

置顶

解决bug

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量467

点赞数

分类专栏： Vue 文章标签： vue css

本文链接：https://blog.csdn.net/qq_35425245/article/details/109537908

版权

本文介绍了在Vue项目中如何安装和使用animate.css动画库v4.0，提供了简单的使用示例，并提示读者可以参考官网（https://animate.style/#usage）获取详细用法。

摘要由CSDN通过智能技术生成

vue中过渡动画中使用 animate.css 动画库v4.0

安装及引入 animate.css
- 使用方法
- Animate.css 官网地址

安装及引入 animate.css

npm install animate.css --save

//main.js 中引入
import animate from 'animate.css';
Vue.use(animate);

使用方法

不太会说明,所以直接上代码,重点看注释:

<template>
    <div id="app">
        <el-button @click="butClick()">按钮</el-button>

        <!-- 使用 vue 过渡动画加载 animate.css 版本4 enter-active-class:进动画类,leave-active-class:出动画类-->
        
		<!--重点是加载版本v4的animate 一定要记得在类前加animate__animated-->
        <transition
            enter-active-class="animate__animated animate__fadeInDown"
            leave-active-class="animate__animated animate__fadeOutDown"
        >
            <!-- 必须是显隐 使用vue  v-if或v-show-->
            <el-button v-if="visible">这是按钮动画</el-button>
        </transition>
    </div>
</template>
&