amazeui学习笔记--css(常用组件15)--CSS动画Animation
一、总结
1、css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画。
Class | 描述 |
---|---|
.am-animation-fade | 淡入 |
.am-animation-scale-up | 逐渐放大 |
.am-animation-scale-down | 逐渐缩小 |
.am-animation-slide-top | 顶部滑入 |
.am-animation-slide-bottom | 底部滑入 |
.am-animation-slide-left | 左侧滑入 |
.am-animation-slide-right | 右侧滑入 |
.am-animation-shake | 左右摇动 |
.am-animation-spin | 无限旋转 |
2、基本使用(这个好): <div class="am-animation-fade">...</div>
3、一直旋转的icon:<span class="am-icon-cog am-animation-spin"></span>
4、反向动画:添加 .am-animation-reverse
class,让动画反向运行(通过把 animation-direction
设置为 reverse
实现)。
<div class="am-animation-fade am-animation-reverse">...</div> <span class="am-icon-cog am-animation-spin am-animation-reverse"></span>
5、动画延迟执行:添加以下 class 可以使动画延迟 1-6s
执行。
.am-animation-delay-1
.am-animation-delay-2
.am-animation-delay-3
.am-animation-delay-4
.am-animation-delay-5
.am-animation-delay-6
自定义延时:
.my-animation-delay {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
<p><button type="button" class="am-btn am-btn-primary am-animation-delay-1">延迟 1s 执行</button></p>
二、CSS动画Animation
Animation
目录
- 使用演示
- 默认效果
- 反向动画
- 动画延迟执行
- 参考资源
CSS3 动画封装,浏览器需支持 CSS3 动画。
Class | 描述 |
---|---|
.am-animation-fade | 淡入 |
.am-animation-scale-up | 逐渐放大 |
.am-animation-scale-down | 逐渐缩小 |
.am-animation-slide-top | 顶部滑入 |
.am-animation-slide-bottom | 底部滑入 |
.am-animation-slide-left | 左侧滑入 |
.am-animation-slide-right | 右侧滑入 |
.am-animation-shake | 左右摇动 |
.am-animation-spin | 无限旋转 |
使用演示
点击按钮查看动画效果。
默认效果
Fade
Scale Up
Scale Down
Slide Top
Slide Bottom
Slide Left
Slide Right
Shake
<div class="am-animation-fade">...</div> <span class="am-icon-cog am-animation-spin"></span>
反向动画
添加 .am-animation-reverse
class,让动画反向运行(通过把 animation-direction
设置为 reverse
实现)。
Fade
Scale Up
Scale Down
Slide Top
Slide Bottom
Slide Left
Slide Right
Shake
<div class="am-animation-fade am-animation-reverse">...</div> <span class="am-icon-cog am-animation-spin am-animation-reverse"></span>
动画延迟执行
添加以下 class 可以使动画延迟 1-6s
执行。
.am-animation-delay-1
.am-animation-delay-2
.am-animation-delay-3
.am-animation-delay-4
.am-animation-delay-5
.am-animation-delay-6
自定义延时:
.my-animation-delay {
-webkit-animation-delay: 15s;
animation-delay: 15s; }
点击开始执行动画
没延迟的动画
延迟 1s 执行
延迟 2s 执行
延迟 3s 执行
延迟 4s 执行
延迟 5s 执行
延迟 6s 执行
<button id="animation-start" type="button" class="am-btn am-btn-danger">点击开始执行动画</button> <hr/> <div id="animation-group"> <p><button type="button" class="am-btn am-btn-primary">没延迟的动画</button></p> <p><button type="button" class="am-btn am-btn-primary am-animation-delay-1">延迟 1s 执行</button></p> <p><button type="button" class="am-btn am-btn-secondary am-animation-delay-2">延迟 2s 执行</button></p> <p><button type="button" class="am-btn am-btn-success am-animation-delay-3">延迟 3s 执行</button></p> <p><button type="button" class="am-btn am-btn-warning am-animation-delay-4">延迟 4s 执行</button></p> <p><button type="button" class="am-btn am-btn-danger am-animation-delay-5">延迟 5s 执行</button></p> <p><button type="button" class="am-btn am-btn-primary am-animation-delay-6">延迟 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] - 所有动画执行完成'); dfds = []; }); } }); }); </script>
参考资源
- CSS 动画
- Animate.css