amazeUI和bootstrap很像，但又有自己的独特之处，方便了很多。
<!doctype html>
<html class="no-js"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Animation 动画</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
</head>
<body class="am-doc">
<section class="am-g doc-animations">
<div class="am-u-sm-6 am-u-md-12">
<button class="am-btn am-btn-default am-btn-block am-animation-reverse" data-doc-animation="fade">fade</button>
<div class="am-animation-fade">fade</div>
</div>
<div class="am-u-sm-6 am-u-md-6">
<button class="am-btn am-btn-danger am-btn-block am-animation-reverse" data-doc-animation="scale-up">scale-up</button>
<div class="am-animation-scale-up">scale-up</div>
</div>
<div class="am-u-sm-6 am-u-md-6">
<button class="am-btn am-btn-danger am-btn-block am-animation-reverse" data-doc-animation="scale-down">scale-down</button>
<div class="am-animation-scale-down">scale-down</div>
</div>
<div class="am-u-sm-6 am-u-md-3">
<button class="am-btn am-btn-warning am-btn-block am-animation-reverse" data-doc-animation="slide-top">slide-top</button>
<div class="am-animation-slide-top">slide-top</div>
</div>
<div class="am-u-sm-6 am-u-md-3">
<button class="am-btn am-btn-warning am-btn-block am-animation-reverse" data-doc-animation="slide-bottom">slide-bottom</button>
<div class="am-animation-slide-bottom">slide-bottom</div>
</div>
<div class="am-u-sm-6 am-u-md-3">
<button class="am-btn am-btn-warning am-btn-block am-animation-reverse" data-doc-animation="slide-left">slide-left</button>
<div class="am-animation-slide-left">slide-left</div>
</div>
<div class="am-u-sm-6 am-u-md-3">
<button class="am-btn am-btn-warning am-btn-block am-animation-reverse" data-doc-animation="slide-right">slide-right</button>
<div class="am-animation-slide-right">slide-right</div>
</div>
<div class="am-u-sm-6 am-u-md-6">
<button class="am-btn am-btn-success am-btn-block am-animation-reverse" data-doc-animation="shake">shake</button>
<div class="am-animation-shake">shake</div>
</div>
<div class="am-u-sm-6 am-u-md-6">
<button class="am-btn am-btn-success am-btn-block am-animation-reverse" data-doc-animation="spin">spin</button>
<div class="am-animation-spin am-u-md-6 am-animation-reverse" style="background: #faa;width: 50px;">spin</div>
</div>
</section>
<script>
$(function() {
$('.doc-animations').on('click', '[data-doc-animation]', function() {
var $clicked = $(this),
animation = 'am-animation-' + $clicked.data('docAnimation');
if($clicked.data('animation-idle')) {
clearTimeout($clicked.data('animation-idle'));
}
$clicked.removeClass(animation);
setTimeout(function(){
$clicked.addClass(animation);
$clicked.data('animation-idle', setTimeout(function(){
$clicked.removeClass(animation);
$clicked.data('animation-idle', false);
}, 500));
}, 50);
});
});
</script>
</body>
</html>
4673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
