react使用animate.css完成动画

1.引入依赖库
cnpm i animate.css
cnpm i react-addons-css-transition-group
2.导入模块
import “animate.css”;
import ReactCSSTransitionGroup from “react-addons-css-transition-group”;

3.使用，例子如下
<ReactCSSTransitionGroup
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={2500}
transitionLeaveTimeout={1500}
transitionName=“animated”

            //这里一定要加上key//className是animate.css中的类名，显示不同动画<div key="amache" className="animated fadeInLeftBig" ><img src="/assets/img/history/157.png" alt="" /></div>

作者：bennnnn
链接：https://www.jianshu.com/p/11af4687d515
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

react使用animate.css完成动画相关推荐

React动态效果——animate.css
1.React引入Animate.css animate官网 animate官网查看需要的动效 react项目引入animate.css npm i animate.css npm i react-a ...
vue --- 使用animate.css实现动画
1.下载animate.css npm install --save-dev animate.css// 注意你使用的源 nrm ls(若没有改变可以忽略) 2.导入animate.css <l ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
怎样控制animate.css的动画时间
打开 animate.css 第一行 .animated {animation-duration: 1s;animation-fill-mode: both; } animation-duration ...
animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
animate.css 自定义动画
在使用animate.css 的时候动画的高度超过了预期的高度在这种情况下肯定是过不了测试的,怎么办的? <div class="fold-div animated " ...
css 动画重播,javascript – Animate.CSS重播？
我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试的不起作用.这是代码: HTML: Replay JS: var $j = jQuery.noConflict(); $j(& ...
animate.css源码
animate.css源码 animate.css源码,关于如何使用animate.css,可参考 vue+ts或者react+ts如何使用animate.css. /*!动画属性:animation ...

react使用animate.css完成动画

react使用animate.css完成动画相关推荐

最新文章

热门文章