在微信上关注我们
CSS3 Animation, require support from browser.
| Class | Description |
|---|---|
.am-animation-fade | Fade |
.am-animation-scale-up | Scale Up |
.am-animation-scale-down | Scale Down |
.am-animation-slide-top | Slide from Top |
.am-animation-slide-bottom | Slide from Bottom |
.am-animation-slide-left | Slide from Left |
.am-animation-slide-right | Slide from Right |
.am-animation-shake | Shake |
.am-animation-spin | Infinitly spin |
Click on the buttons to see animations.
<div class="am-animation-fade">...</div>
<span class="am-icon-cog am-animation-spin"></span>Using .am-animation-reverse class, we can reverse the animation (by settinganimation-direction to reverse).
<div class="am-animation-fade am-animation-reverse">...</div>
<span class="am-icon-cog am-animation-spin am-animation-reverse"></span>Delay Animations using following classes.
.am-animation-delay-1.am-animation-delay-2.am-animation-delay-3.am-animation-delay-4.am-animation-delay-5.am-animation-delay-6Customized delay:
.my-animation-delay {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}<button id="animation-start" type="button" class="am-btn am-btn-danger">Click Here to play animations</button>
<hr/>
<div id="animation-group">
<p><button type="button" class="am-btn am-btn-primary">No delay</button></p>
<p><button type="button" class="am-btn am-btn-primary am-animation-delay-1">Delay 1s</button></p>
<p><button type="button" class="am-btn am-btn-secondary am-animation-delay-2">Delay 2s</button></p>
<p><button type="button" class="am-btn am-btn-success am-animation-delay-3">Delay 3s</button></p>
<p><button type="button" class="am-btn am-btn-warning am-animation-delay-4">Delay 4s</button></p>
<p><button type="button" class="am-btn am-btn-danger am-animation-delay-5">Delay 5s</button></p>
<p><button type="button" class="am-btn am-btn-primary am-animation-delay-6">Delay 6s</button></p>
</div>
<script>
$(function() {
var $btns = $('#animation-group').find('.am-btn');
var dfds = [];
var animating = false;
var animation = 'am-animation-scale-up';
$('#animation-start').on('click', function() {
if (!animating) {
animating = true;
$btns.each(function() {
var dfd = new $.Deferred();
dfds.push(dfd);
var $this = $(this);
if ($.AMUI.support.animation) {
$this.addClass(animation).one($.AMUI.support.animation.end, function() {
$this.removeClass(animation);
dfd.resolve();
});
}
});
$.when.apply(null, dfds).done(function() {
animating = false;
console.log('[AMUI] - All animations end');
dfds = [];
});
}
});
});
</script>