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

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>

参考资源