vue & animate.css 使用讲解

最新推荐文章于 2024-06-13 13:55:18 发布

原创最新推荐文章于 2024-06-13 13:55:18 发布 · 609 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #animation

本文介绍了如何在Vue项目中结合Animate.css库创建动态过渡效果。首先通过npm或yarn安装Animate.css，然后在main.js中引入并使用。在Vue组件中，将Animate.css的类名添加到元素上，设置动画时长，即可实现进入动画。如果需要离开动画，可以使用Vue的transition组件，指定不同的enter和leave激活类名。文章提供了详细的代码示例，帮助开发者快速理解和应用Vue与Animate.css的结合使用。

Animate.css 库官网 https://animate.style/
Vue 讲解 transition 官网 https://cn.vuejs.org/v2/guide/transitions.html

1.安装库
npm install animate.css --save
或者 yarn add animate.css
1. 引入及使用

main.js
import animated from 'animate.css' 

Vue.use(animated)

3.使用

 <div class=" goodlist animate__animated  animate__backInLeft  " >
   <!-- 第一个类名是容器的类名 第二个 animate__animated  为固定的类名 必须要加  第三个animate__backInLeft  是我们在动画库中 选择的效果-->
       <div>内容 盒子</div>  
</div>

css

.goodlist{ width:200px height:200px; background:red;  
animation-duration:2s //设置动画一共需要的时间
}

如果进入和离开的动画都需要设置可以在盒子外面加一个transtion vue自带的属性

 <transition enter-active-class="animate__backInDown" leave-active-class="animate__rotateOut">
      <div class="goodlist  animate__backInDown">内容盒子</div>
</transition>
这样进出都可以有动画了

enter-active-class leave-active-class 两个固定属性是vue中 transition中自带属性详情可以点击官网了解 https://cn.vuejs.org/v2/guide/transitions.html
动画样式在右侧边栏可以选择自己需要的点击复制类名

如果没有动画检查一下元素有没有给宽高简单的vue&&Animate.css 介绍就结束了