有這麼一個需求，利用antd元件庫中的BackTop元件的邏輯，但是自己寫樣式。

我的目標樣式是：有兩張圖片，一張是normal（正常情況），一張是hover（懸停情況）。

這時候就要用到css的動畫了

這是第一版，也是錯誤的版本

下面是jsx的程式碼

<BackTop>

        <div className="normal-top"></div>

</BackTop>

這是css的樣式程式碼

.mybacktop .normal-top {

  height: 50px;

  width: 50px;

  background: url(../../img/topnormal.png) no-repeat;

  text-align: center;

}

.mybacktop .normal-top:hover {

  animation: changebacktopimg 0.3s forwards;

  -webkit-animation: changebacktopimg 0.3s forwards;

}

@keyframes changebacktopimg {

  from {

    background: url(../../img/topnormal.png) no-repeat;

  }

  to {

    background: url(../../img/topfocus.png) no-repeat;

  }

}

這樣子寫的話，hover的時候圖片消失了。經過我一番研究發現我的動畫和antd的動畫重疊了。所以我再寫了一個div作為包裹，並給上antd該元件相關的類名，然後在裡面的div寫上自己的動畫，這個功能就完成了！

下面是jsx的程式碼

<BackTop>

        <div ant-fade-enter ant-fade-enter-active ant-fade>

          <div className="normal-top"></div>

        </div>

      </BackTop>

下面是css的程式碼（其實css的程式碼沒變）

.mybacktop .normal-top {

  height: 50px;

  width: 50px;

  background: url(../../img/topnormal.png) no-repeat;

  text-align: center;

}

.mybacktop .normal-top:hover {

  animation: changebacktopimg 0.3s forwards;

  -webkit-animation: changebacktopimg 0.3s forwards;

}

@keyframes changebacktopimg {

  from {

    background: url(../../img/topnormal.png) no-repeat;

  }

  to {

    background: url(../../img/topfocus.png) no-repeat;

  }

}