Animation 动画

简介

动画是CSS3中的重要组成部分,相比JS动画,CSS3动画更流畅更兼容,现代网页为了体现新潮酷炫少不了用上几个动画效果。本框架已经内置若干常用动画,可直接引用,不需要另外加载其他第三方动画库。

使用方法

Dom元素只要包含动画名便可运行动画,比如说让元素渐显则需要使用class="ax-fadeIn"

伟大的中国
                            <div class="ax-fadeIn">伟大的中国</div>
                                        

进场退场动画

为了呈现良好的仪式感,通常会使用渐变类的动画进场或退场,以下罗列本框架所有的进场和退场动画。

进场动画:fadeIn、fadeInUp、fadeInDown、fadeInLeft、fadeInRight 、springIn、scaleIn,flyInLeft,flyInRight,flyInUp,flyInDown,rotateIn

退场动画:fadeOut、fadeOutUp、fadeOutDown、fadeOutLeft、fadeOutRight 、springOut、scaleOut,flyOutLeft,flyOutRight,flyOutUp,flyOutDown,rotateOut

具体用法就是简单的给元素加上动画类即可,比如class="ax-fadeIn"

当前的动画名是:
伟大的中国
  •                                     <div class>当前的动画名是:<i id="name">无</i></div>
                                        <div class="ax-break"></div>
                                        <div class="box" id="box01">伟大的中国</div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm add-fadeIn">fadeIn渐显</button>
                                        <button class="ax-btn ax-sm add-fadeInUp">fadeInUp向上渐显</button>
                                        <button class="ax-btn ax-sm add-fadeInDown">fadeInDown向下渐显</button>
                                        <button class="ax-btn ax-sm add-fadeInLeft">fadeInLeft左向右渐显</button>
                                        <button class="ax-btn ax-sm add-fadeInRight">fadeInRight右向左渐显</button>
                                        <button class="ax-btn ax-sm add-springIn">springIn弹出</button>
                                        <button class="ax-btn ax-sm add-scaleIn">scaleIn放大</button>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm add-flyInLeft">flyInLeft左侧旋转进入</button>
                                        <button class="ax-btn ax-sm add-flyInRight">flyInRight右侧旋转进入</button>
                                        <button class="ax-btn ax-sm add-flyInUp">flyInUp上方旋转进入</button>
                                        <button class="ax-btn ax-sm add-flyInDown">flyInDown下方旋转进入</button>
                                        <button class="ax-btn ax-sm add-rotateIn">rotateIn中心旋转进入</button>
    
                                        <div class="ax-break"></div>
                                        <div class="ax-break"></div>
    
                                        <button class="ax-btn ax-sm add-fadeOut">fadeOut渐隐</button>
                                        <button class="ax-btn ax-sm add-fadeOutUp">fadeOutUp向上渐隐</button>
                                        <button class="ax-btn ax-sm add-fadeOutDown">fadeOutDown向下渐隐</button>
                                        <button class="ax-btn ax-sm add-fadeOutLeft">fadeOutLeft左向右渐隐</button>
                                        <button class="ax-btn ax-sm add-fadeOutRight">fadeOutRight右向左渐隐</button>
                                        <button class="ax-btn ax-sm add-springOut">springOut弹回</button>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm add-scaleOut">scaleOut缩小</button>
                                        <button class="ax-btn ax-sm add-flyOutLeft">flyOutLeft左侧旋转隐藏</button>
                                        <button class="ax-btn ax-sm add-flyOutRight">flyOutRight右侧旋转隐藏</button>
                                        <button class="ax-btn ax-sm add-flyOutUp">flyOutUp上方旋转隐藏</button>
                                        <button class="ax-btn ax-sm add-flyOutDown">flyOutDown下方旋转隐藏</button>
                                        <button class="ax-btn ax-sm add-rotateOut">rotateOut中心旋转隐藏</button>
                             
  •             //进场和出场
                let box01 = document.querySelector('#box01'),
                    name = document.querySelector('#name');
                box01.addEventListener('animationend', function() {
                    this.setAttribute('class', 'box');
                }, false);
                document.querySelectorAll('button.ax-btn').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('add-') != -1) {
    
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\add-(\S*)/)[1];
                            box01.classList.add('ax-' + aniName);
                            name.innerHTML = 'ax-' + aniName;
                        }
                    }
                });
                                            

强调动画

为了表示突出或者强调,通常会在页面放置一些在一个位置不变的静态动画。本框架直接从第三方开源动画库animate.css拿出来常用的4个静态动画并内置其中。

具体用法就是简单的给元素加上动画类即可,比如class="ax-bounceShow"

  • ax-bounceShow:上下弹跳两下,类似弹跳的弹珠
  • ax-flashShow:忽隐忽现闪两下,类似灯光闪烁
  • ax-pulseShow:由小及大两下,类似心跳效果
  • ax-shakeShow:左右快速移动,类似发抖效果
当前的动画名是:
伟大的中国
  •                                     <div class>当前的动画名是:<i id="ani">无</i></div>
                                        <div class="ax-break"></div>
                                        <div class="box" id="box03">伟大的中国</div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm ani-bounceShow">bounce弹跳</button>
                                        <button class="ax-btn ax-sm ani-flashShow">flash闪烁</button>
                                        <button class="ax-btn ax-sm ani-pulseShow">pulse心跳</button>
                                        <button class="ax-btn ax-sm ani-shakeShow">shake颤抖</button>
                             
  •             //静态动画
                let box03 = document.querySelector('#box03'),
                    ani = document.querySelector('#ani');
                box03.addEventListener('animationend', function() {
                    this.setAttribute('class', 'box');
                }, false);
                document.querySelectorAll('button.ax-btn').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('ani-') != -1) {
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\ani-(\S*)/)[1];
                            box03.classList.add('ax-' + aniName);
                            ani.innerHTML = 'ax-' + aniName;
                        }
                    }
                });
                                            

旋转动画

如果是360度无限旋转,一般会是顺时针旋转;如果是展开折叠旋转,一般是逆时针旋转。以下列举本框架所使用的常用旋转方式。

具体用法就是简单的给元素加上动画类即可,比如class="ax-rotate180"

  • ax-rotate360:顺时针旋转360度,速度是2000ms
  • ax-rotate180:逆时针旋转180度,速度是ax-slowest
  • ax-rotate90:逆时针旋转90度,速度是ax-normal
  • ax-rotate45:逆时针旋转45度,速度是ax-normal
当前的动画名是:
伟大的中国
  •                                     <div class>当前的动画名是:<i id="spin">无</i></div>
                                        <div class="ax-break"></div>
                                        <div class="box" id="box04">伟大的中国</div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm spin-rotate360">rotate360</button>
                                        <button class="ax-btn ax-sm spin-rotate180">rotate180</button>
                                        <button class="ax-btn ax-sm spin-rotate90">rotate90</button>
                                        <button class="ax-btn ax-sm spin-rotate45">rotate45</button>
                             
  •             let box04 = document.querySelector('#box04'),
                    spin = document.querySelector('#spin');
                box04.addEventListener('animationend', function() {
                    this.setAttribute('class', 'box');
                }, false);
                document.querySelectorAll('button.ax-btn').forEach(function(item) {
                    if (item.getAttribute('class').indexOf('pin-') != -1) {
                        item.onclick = function() {
                            let aniName = item.getAttribute('class').match(/\pin-(\S*)/)[1];
                            box04.classList.add('ax-' + aniName);
                            spin.innerHTML = 'ax-' + aniName;
                        }
                    }
                });
                                            

速度

本框架内置了5种速度,分别是ax-fast(100ms)、ax-normal(200ms)、ax-slow(300ms),ax-slower(400ms)、ax-slowest(500ms),默认是ax-slow。

使用方法则是在元素具备动画类名基础上,追加熟读类名,比如class="ax-fadeIn ax-fast"

当前的速度是:
伟大的中国
  •                                     <div class>当前的速度是:<i id="speed">无</i></div>
                                        <div class="ax-break"></div>
                                        <div class="box" id="box02">伟大的中国</div>
                                        <div class="ax-break"></div>
                                        <button class="ax-btn ax-sm speed-fast">fast100ms</button>
                                        <button class="ax-btn ax-sm speed-normal">normal200ms</button>
                                        <button class="ax-btn ax-sm speed-slow">slow300ms</button>
                                        <button class="ax-btn ax-sm speed-slower">slower500ms</button>
                                        <button class="ax-btn ax-sm speed-slowest">slowest1000ms</button>
                                        <div class="ax-break"></div>
                                            
  •             //速度
                let box02 = document.querySelector('#box02'),
                speed = document.querySelector('#speed');
                box02.addEventListener('animationend', function() {
                    this.setAttribute('class', 'box');
                }, false);
                document.querySelector('.speed-fast').onclick = function() {
                    box02.classList.add('ax-scaleIn', 'ax-fast');
                    speed.innerHTML = 'ax-fast';
                }
                document.querySelector('.speed-normal').onclick = function() {
                    box02.classList.add('ax-scaleIn', 'ax-normal');
                    speed.innerHTML = 'ax-normal';
                }
                document.querySelector('.speed-slow').onclick = function() {
                    box02.classList.add('ax-scaleIn', 'ax-slow');
                    speed.innerHTML = 'ax-slow';
                }
                document.querySelector('.speed-slower').onclick = function() {
                    box02.classList.add('ax-scaleIn', 'ax-slower');
                    speed.innerHTML = 'ax-slower';
                }
                document.querySelector('.speed-slowest').onclick = function() {
                    box02.classList.add('ax-scaleIn', 'ax-slowest');
                    speed.innerHTML = 'ax-slowest';
                }
                                            

循环

所有动画均执行一次,如果需要无限循环,请给有动画类的元素上追加样式style="animation-iteration-count: infinite;"。因为无限循环应用的场景不多,所以不再另写class类。

伟大的中国
                            <div class="box ax-rotate360 ax-infinite" style="animation-iteration-count: infinite;">伟大的中国</div>