CSS 動畫學習筆記
阿新 • • 發佈：2020-08-25
該筆記中，主要記錄CSS動畫的：transition 和 animation
一丶Transition
transition 從它本身的意思來說就是 過渡，在css3引入transition前，css的狀態變化都是即時完成的，例如我們平時若是不使用UI庫的情況下，做類似於摺疊面板的元件時，我們通常會用display的none和block來進行顯示&隱藏的控制；有時用到偽類或者點選進行即時樣式更改，頁面上的效果也是即時變化，通常是沒有動畫過渡效果，如下例：
註釋：這是一個通過點選控制高度變化的塊
身為前端，當然是想做一些頁面效果好的東西，而我們就可以通過transition對上面進行改進，效果如下：
註釋：這是添加了transition之後的效果
實現上述的程式碼如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .block_wrap { width: 500px; height: 500px; background: #e3e3e3; /*設定動畫過渡時間和其所需要的過渡的屬性*/ transition: 1s height; margin: 0 auto; } /*通過點選事件新增/刪除該樣式進行高度控制*/ .pick { height: 100px } </style> </head> <body> <div id="block_wrap" class="block_wrap"> </div> </body> <script type="text/javascript"> // 獲取標題元素var block_wrap = document.getElementById('block_wrap') //給標題元素新增點選事件，通過點選控制class的新增&去除達成動畫效果 block_wrap.onclick = function() { // 獲取標題元素className集合 let classArray = this.className.split(/\s+/) if (classArray.includes('pick')) { block_wrap.classList.remove('pick') return } else { block_wrap.classList.add('pick') return } } </script> </html>
如若我們需要動畫效果的不止高度呢？那也可以，可以將樣式程式碼改成這樣
1 .block_wrap { 2 width: 500px; 3 height: 500px; 4 background: #e3e3e3; 5 /*可以設定多個屬性，並且每個屬性的過渡時間都可不同*/ 6 transition: 1s height, 0.5s width; 7 margin: 0 auto; 8 } 9 /*通過點選事件新增/刪除該樣式進行高度&寬度控制*/ 10 .pick { 11 height: 100px; 12 width: 100px 13 }
改進之後的效果：
註釋：點選時，控制高度&寬度變化
還有更加花裡胡哨一些的，可以讓動畫效果延遲（delay），效果見下圖：