和 CSS 搭起來快速成形滑動效果

如果你喜歡 animation 動態的互動呈現，那麼搭配著 CSS 的 transition 之作用，可以很快的達成。

很簡單的使用 toggle 功能，就可以將滑動效果，加到 click 互動動作的呈現樣態。

在設計思考中，也使用了 CSS 變數的使用功能 --variable 。這一功能和 javascript 搭起來，就可以使用 javascrip 來改變 css 的 Class 的內容。

真好用！啊！

javascript 和 CSS 連手起來，對文科生而言，在思考上真的直觀的很多。不用去想太多什麼迴圈之類的寫法，就可以有了 transition 的效果。

原始照片檔案：

請按這裡，圖片就會以滑動的動作出現和隱藏

CSS語法及程式：

 <div id="aaa01">
  <style>
   
        div#aaa01 {
        --imgheight: 0px;
        }
    
       .imgshowdisappear {
      overflow: hidden;
      height: 0px;
      width:100%;
      transition: 1s;
    }

    .imgshowdisappear img {
      width:100%;
    }
   
    .imgshowdisappearadd {
     
      height: var(--imgheight, 550px);
    }

    .cla200507 {
      border: 1px solid gray;
      padding:1em;
      cursor: pointer;
    }
   
    .cla200507:hover {
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.24) 36%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0.65) 97%,rgba(0,0,0,0.65) 100%);
     }
   
   </style>


<div onclick="myFun0507()" class="cla200507">請按這裡，圖片就會以滑動的動作出現和隱藏<br></div>


<div class="imgshowdisappear"><img src="https://images.pexels.com/photos/4265597/pexels-photo-4265597.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"      alt="">
</div>

</div>


<script>
      var  root = document.getElementById("aaa01"); 
      var ele =  document.querySelector("div.imgshowdisappear");
      var ele2 =  document.querySelector("div.imgshowdisappear >img");
      ele2.onload = function() {
      var ele2img = ele2.offsetHeight;
      root.style.setProperty("--imgheight",  ele2img + "px");}
    
    
      function myFun0507() {   
        ele.classList.toggle("imgshowdisappearadd");
      }
 </script>