編碼的世界 / 優質文選 / 生涯

CSS3動畫（transition，transform）和元素的隱藏顯示display

2022年6月28日
-   

    工作中經常會寫一些簡單的顯示隱藏功能，可以適當加個動畫
transition（過度動畫，從某某某屬性到某某某屬性）語法
transition: property duration timing-function delay;

值描述
transition-property規定設置過渡效果的 CSS 屬性的名稱。
transition-duration規定完成過渡效果需要多少秒或毫秒。
transition-timing-function規定速度效果的速度曲線。
transition-delay定義過渡效果何時開始。

transform （轉化動畫）   旋轉：rotate()
   縮放：scale()
   翻轉：skew()
 
transition和transform 動畫會占文檔流display：none   不占文檔流    block 占文檔流 
動畫
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .main{
 height: 600px;
 color: #fff;
 }
 .down{
 height: 300px;
 transform: scaleY(0);
 transition: transform 0.8s;
 transform-origin: bottom center;
 background: #2c275b;
 }
 .active {
 height: 300px;
 transform: scaleY(1);
 transition: transform 0.8s;
 transform-origin: bottom center;
 }
 .btn{
 display: inline-block;
 margin-bottom: 20px;
 padding: 3px 10px;
 border-radius: 5px;
 background: #999;
 }
 </style>
</head>
<body>
<div class="main">
 <span class="btn" id="btn">測試</span>
 <div class="down">
 contentcontentcontentcontentcontentcontent
 </div>





</div>
<script>
 document.getElementById('btn').addEventListener('click',()=>{
 let element = document.getElementsByClassName('down')[0];
 addClass(element,'active');
 });
 function addClass (element,className) {
 element.className = element.className.indexOf(className)===-1 ? element.className+' '+className : element.className.replace(' active','') ;
 }
</script>
</body>
</html>

 
  • ps：如果使用transform和transition寫動畫可能會出現文檔流的一系列問題，
  •         可以使用脫離文檔流的定位（absolute，fixed）來解決這個問題

 
 





CSDN 社區圖書館，開張營業！


深讀計劃，寫書評領圖書福利~

熱門文章