Animate.css 基础使用方法
2016-05-09 17:39
706 查看
animate.css是一堆很酷的，有趣的，跨浏览器的动画效果库，你可以随意在你的项目中使用。用在你想要突出的任何地方，如主页，滑块，这像喝水一样容易，迷死人了。
当与jQuery结合起来，你可以自己决定何时启用这些动画，通过jQuery动态添加使用动画，你可以做的事情更多：
你还可以检测动画结束事件：
注：jQuery.one（） 最多执行事件处理一次。点击 此处 了解详情。
您可以更改动画的持续时间，增加延迟或改变显示次数：
注意：一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”
用法
在您的网站上使用animate.css，只要简单地把样式表插入到文档中的中，并为需要动画的元素添加一个CSS类名即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！<head> <link rel="stylesheet" href="animate.min.css"> </head>
当与jQuery结合起来，你可以自己决定何时启用这些动画，通过jQuery动态添加使用动画，你可以做的事情更多：
$('#yourElement').addClass('animated bounceOutLeft');你还可以检测动画结束事件：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);注：jQuery.one（） 最多执行事件处理一次。点击 此处 了解详情。
您可以更改动画的持续时间，增加延迟或改变显示次数：
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}注意：一定要在CSS恬当的的前缀(webkit, moz等)代替“vendor”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
#ball{
width:200px;
height: 200px;
background: #F08080;
border-radius: 50%;
margin:100px auto;
}
</style>
<script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="animated bounceIn" id="ball">
</div>
<div class="input-ui">
<input type="text" name="" id="" value="" class="input-ui-txt" />
<input type="button" name="" id="changeanimation" value="改变动画" />
</div>
<script type="text/javascript">
(function($){
//console.log($('.ball'));
function changeAnimations(ele,type){
if(typeof ele === 'string'){
$(ele).removeClass().addClass(type + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
return;
}
ele.removeClass().addClass(type + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
var input = $('.input-ui-txt');
var ball = $('#ball');
$("#changeanimation").click(function(event){
event.preventDefault();
event.stopPropagation();
var val = input.val();
changeAnimations(ball,val);
});
})($);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐