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" style="animation-iteration-count: infinite;">伟大的中国</div>