技術概述

嘗試給卡片新增滑鼠懸停動畫效果，主要使用CSS3的 transition（屬性漸變），scale，z-index實現。

技術詳述

1. 新增卡片陰影

   註冊滑鼠懸停事件，當事件觸發，修改邊框 box-shadow屬性。

   .card:hover {
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
   }
   

2. 元件拉伸處理

   需要實現文字元件高度拉伸以及文字浮現和過濾。通過hover監聽懸停事件，transition改變body元件高度，使用 translateX， translateY使元件在介面沿X,Y軸垂直移動，完成文字元件的拉伸。

   描述文字浮現可使用 opacity

   屬性的透明度實現，當監測hover，屬性值變為1顯現。為避免文字溢位，可新增filters對溢位文字進行省略處理。

   /**
   * BODY
   **/
   .card__body {
     position: relative;
     height: 185px;
     padding: 20px;
     /*相容 Safari　Chrome 瀏覽器
     -webkit-transition: height 0.5s;*/
     transition: height 0.5s;
   }
   .card:hover .card__body {
     height: 300px;
   }
   /**
   * DESCRIPTION
   **/
   .card__description {
     position: absolute;
     left: 20px;
     right: 20px;
     bottom: 56px;
     margin: 0;
     padding: 0;
     color: #666C74;
     line-height: 27px;
     opacity: 0;
     transform: translateY(45px);
     transition: opacity 0.3s, -webkit-transform 0.3s;
     transition-delay: 0s;
   }
   .card:hover .card__description {
     opacity: 1;
     transform: translateY(0);
     transition-delay: 0.2s;
   }
    
   

3. 圖片縮放及陰影覆蓋

   同上監聽hover事件，使用 transform 實現屬性漸變，將背景色設為 #000，事件觸發修改透明度，實現陰影覆蓋效果；使用 scale屬性，將圖片沿X,Y軸縮放。

   /**
   * IMG
   **/
   .card__thumb {
     height: 245px;
     overflow: hidden;
     background-color: #000;
     -webkit-transition: height 0.5s;
     transition: height 0.5s;
   }
   .card__thumb img {
     width: 400px;
     height: 250px;
     display: block;
     opacity: 1;
     transform: scale(1);
     transition: opacity 0.5s, transform 0.5s;
   }
   .card:hover .card__thumb {
     height: 130px;
   }
   
   .card:hover .card__thumb img {
     opacity: 0.6;
     -webkit-transform: scale(1.2);
             transform: scale(1.2);
   }
    
   

問題和解決過程

問題：無法進行圖片自適應，在img層或card_thumb層設定寬高會影響懸停時圖片的縮放和文字元件的拉伸。

解決：

​ 方法一：對body，header，footer，thumb新增父級元件，在父級設定寬高，再使用 z-index屬性實現元件堆疊效果。相當於在一個元件內設定三層元件，互相之間不干涉，設定寬高比也可直接自適應。

​ 方法二：算出圖片應有寬高，直接在img層設定寬高，這裡寬高分別為400px，250px。缺點在於卡片元件調整大小時，圖片也需要調整，很麻煩。

解決效果

總結

​ 實現懸停技術時幾乎沒有遇到什麼難點，它就像把幾個屬性效果疊加獲得一個動畫效果，很簡單但也很意思。但實現動畫的基礎還是在於你要熟悉CSS的屬性功能，在使用時才會更加熟練，因為幾乎所有的CSS動畫效果實現，都是由transition這些簡單底層的屬性組合實現，掌握基礎屬性，就可以實現更多動畫效果。