教你vue里用Animate.css库

简介: 笔记

vue中使用Animate.css库

自定义过渡类名

我们可以通过以下 attribute 来自定义过渡类名:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

    他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css结合使用十分有用。

使用Animate.css库

<transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
            >
    <p v-if="show">hello</p>
</transition>

官方文档 引入Animate.css库,再配合vue的自定义过渡类名,指定enter-active-classleave-active-class的自定义类,两者都要有animated类,用于说明其使用的是Animate.css库,再根据需求定义另外一个动画类名

动画类名:在 Animate官网 获取。

Demo

See the Pen vue中使用animate.css库 by xugaoyi (@xugaoyi) on CodePen.

相关文章
|
19天前
|
前端开发 JavaScript
vue 动态改变css样式
vue 动态改变css样式
21 0
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
2月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
50 0
|
4月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
90 0
|
2月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
33 0
|
5月前
|
JavaScript
vue中如何使用animate.css库
vue中如何使用animate.css库
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
1月前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
43 8
|
2月前
|
JavaScript API
Vue3新的状态管理库-Pinia(保姆级别教程)
Vue3新的状态管理库-Pinia(保姆级别教程)
47 0
|
2月前
|
前端开发 JavaScript
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
51 1