css3元素出現動畫實例

css3中實現動畫通常有兩種方式，一個是transition過渡，一個是animation動畫。最主要區別就是transition須要條件觸發，一般會用hover來觸發，而animation則更靈活，能夠自動播放，也能夠經過條件觸發。

那麼，如何實現一個元素出現動畫呢？

若是是transition，能夠很輕鬆的實現這一效果，例如

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
複製代碼

這樣就實現了一個「從下至上，透明度從0至1」的出現動畫，很經常使用不是嗎。

codepen.io/xboxyan/pe.…點擊預覽

固然，咱們也能夠用animation來實現，

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  animation:show .5s forwards;
}

.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px)
  }
}
複製代碼

個人天，竟然要寫這麼多，才能實現和上面同樣的效果，沒辦法，出現和消失是兩組不一樣的動畫，因此須要定義兩個動畫。

codepen.io/xboxyan/pe.…點擊預覽

元素出現動畫

上面簡單的介紹了動畫的兩種實現方法。嚴格來說，transition只是過渡，只是切換樣式過程當中有動畫的效果，而animation纔是真正作動畫的。固然也須要根據本身的實際需求來選擇。

下面來看這樣一個需求：

一般頁面上要全局顯示一個消息提示，相似於toast效果。這是我一般的作法

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    oDiv.classList.add('show');
    this.timer = setTimeout(function(){
      oDiv.classList.remove('show');
    },2000)
}
複製代碼

原理就是，向頁面添加一個div#messageInfo容器，而後添加類名.show讓元素出現，2s後自動移除.show實現隱藏，效果以下

codepen.io/xboxyan/pe.…點擊預覽

能夠很明顯的看到一個效果就是，第一次出現的時候是沒有動畫的，之後就正常了。可能平時項目中，這一點小瑕疵也沒什麼影響，畢竟很大一部分人連動畫都不給啊，直接就是display:none和display:block，能夠說是提不上體驗了。

那麼，爲何會出現這種現象呢？

首先明白一點，transition是不會自動觸發的，上面是經過添加和移除類名來實現過渡效果的。可是在第一次元素剛剛建立的時候，此時在頁面上該元素還未加載完成，這個時候當即添加類名，實際上是能夠等同因而一塊兒建立的，沒有造成過渡效果。解決這個問題很簡單，就是稍微延時一下

//...
setTimeout(function(){
   oDiv.classList.add('show');
},50)
//...
複製代碼

這樣就基本上解決了這個問題，以下

codepen.io/xboxyan/pe.…點擊預覽

可是，理論上這裏的延遲越小越好，我測試了一下，大概和瀏覽器的性能有關吧，用定時器的目的也僅僅是等待元素加載完成，而dom也沒有原生監聽加載完成事件，因此只能用定時器估一個大概的值。

可是，這仍然是一個瑕疵，從代碼結構上來說，這也是沒法忍受的。那麼，還有沒有更好的方法呢？答案就是animation

Animation

雖然從開頭的例子來看，animation的寫法又臭又長，可是也正體現出它的功能強大，其中之一就是自動播放動畫

那麼，把上面的toast改造一下，用animation實現

.messageInfo{ 
    /**...**/
    animation:show .5s forwards;
}
.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(-100%)
  }
}
複製代碼

js基本和以前一致

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    oDiv.classList.remove('hide');//默認是顯示
    this.timer = 
      setTimeout(function(){
      oDiv.classList.add('hide');//2s後隱藏
    },2000)
}
複製代碼

效果以下

codepen.io/xboxyan/pe.…點擊預覽

能夠說是至關完美了

其餘應用場景

元素添加動畫

一般在添加表單或者上傳圖片時，若是須要讓新添加的元素產生一個動畫效果，那麼能夠用到animation

codepen.io/xboxyan/pe.…點擊預覽

固然，還能夠作到分頁加載動畫，須要給每一個元素添加一個延時animation-delay便可

/*animation-delay*/
.list li:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}
.list li:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}
.list li:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}
.list li:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}
.list li:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}
複製代碼

效果以下，元素會依次登場，預覽窗口比較小，建議在原連接點擊預覽 查看

codepen.io/xboxyan/pe.…點擊預覽

而後，還能夠實現九宮格動畫，讓元素在出現的時候從左上方依次向右下方擴散，一樣是用到了animation-delay

codepen.io/xboxyan/pe.…點擊預覽

很酷炫不是嗎，無需用到js，也無需用到其它框架，純自然，支持的瀏覽器體驗更上一層樓，不支持的瀏覽器也無傷大雅

小節

整體來講，animation遠比transition要強大的多，固然在實際使用中也要分場景（好比文章開頭的那個例子很明顯就是transition更好），若是有交互，如鼠標移入，首先看transition可否實現，其次纔是animation，若是像這一類元素出現（生成）動畫，那麼就須要使用到animation了。

最後，給你們推薦一個 前端學習進階內推交流羣685910553（ 前端資料分享），無論你在地球哪一個方位， 無論你參加工做幾年都歡迎你的入駐！（羣內會按期免費提供一些羣主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）

若是您對這個文章有任何異議，那麼請在文章評論處寫上你的評論。

若是您以爲這個文章有意思，那麼請分享並轉發，或者也能夠關注一下表示您對咱們文章的承認與鼓勵。

願你們都能在編程這條路，越走越遠。