使用animate库

我们可以通过以下 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 (opens new window)结合使用十分有用。

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

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

动画类名：在 Animate官网 (opens new window) 获取。

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

使用animate库相关推荐

Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的深入理解 V ...
vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 Vue 中的 ...
Vue3过渡动画实现
一.认识动画在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方 ...
2016年备用的9个顶级动画库
1. Animate.css Animate.css 是当前最流行.最易用的CSS动画库.把Animate 库应用到你的项目中就如同为你项目中的元素添加一个类名这样简单.你也可以通过jQuery的事件 ...
html里c3动画是什么,C3动画+H5知识点使用总结
概览 Html5和CSS3就是在原有的基础上新加的一些特性,在前面的博客中已经用很多新特性了,Flex弹性布局大大的减少css代码,今天再总结一下工作中会用到的一些常用知识点. 本编文章会讲到的知识点 ...
Web前端：2022年最佳Javascript动画库
当你考虑制作网站时,你首先考虑的是如何使你的网站脱颖而出,虽然有很多方法可以让它脱颖而出,比如发布独特的内容.制作引人入胜的视频和文章,但吸引人的最佳方式之一是动画和图形.前端开发人员利用Javasc ...
004--自找麻烦之 vue2.0
人的差异其实很小:一,你在犹豫,他在做,所以他比你成功机会多;二,你在找借口,他在解决问题,所以他比你事业有成;三,你在消费,他在理财,所以他比你更富足;四,你在算计自己的利益,他在考虑对方的利益,所 ...

使用animate库

使用animate库相关推荐

最新文章

热门文章