amazeui学习笔记--css（常用组件15）--CSS动画Animation

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	无限旋转

使用演示

点击按钮查看动画效果。

默认效果

 Copy

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 实现）。

 Copy

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

自定义延时：

 Copy

.my-animation-delay {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

 Copy

点击开始执行动画

---

没延迟的动画

延迟 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