VScode动画库的使用

最新推荐文章于 2025-04-23 16:19:42 发布

buterra

最新推荐文章于 2025-04-23 16:19:42 发布

阅读量947

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/buterra/article/details/130610603

版权

该文指导读者通过npm安装animate.css库，并在Vue组件中导入和应用，包括设置不同的过渡动画效果，如appear、enter-active-class和leave-active-class属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.打开浏览器搜索npm

2. 点击进入后在搜索框输入animate，点击提示的第一个

3.点击图示位置

4.安装库

 npm install animate.css

5.引入

import 'animate.css'

6.使用（name是固定的）

 <transition-group 
     appear
     name="animate__animated animate__bounce" 
     enter-active-class="animate__swing"
     leave-active-class="animate__zoomOut"
 >
            <h1 v-show="!isShow" key="1">Hello!</h1>
            <h1 v-show="isShow" key="2">zhangsan!</h1>
 </transition-group>