CSS 正向过渡与反向过渡

前言

在CSS中，可以使用transition来实现过渡效果。

可以看到，这里实现的过渡效果，在变换和复原的过程中，过渡效果是相同的。但如果需要这两个过程的过渡效果不同时该怎么办。
本文简单讨论一下正向过渡和反向过渡的设置。（变换时的过渡效果称为正向过渡，复原时的过渡效果称为反向过渡）

正向过渡

• 将transition属性设置在触发事件对应的伪类中，可只设置正向过渡。
  如下图所示，hover事件触发时，是有过渡效果的；而当复原时，没有过渡效果，是直接复原的。
  

  正向过渡

  CSS代码

  .block{
  	width: 100px;
      height: 100px;
      background-color: cadetblue;
  }
  .block:hover{
      height: 200px;
      /* transition 写在hover中 */
      transition: height 0.5s linear 0s;
  }
  

反向过渡

• 将transition属性设置在过渡元素的样式中，可同时设置正向过渡和反向过渡。
  如下图所示，正向过渡和反向过渡的效果是相同的。

  

  同时设置正向和反向过渡

  CSS代码

  .block{
  	width: 100px;
      height: 100px;
      background-color: cadetblue;
      /* 将transition 写在元素的样式中 */
      transition: height 0.5s linear 0s;
  }
  .block:hover{
      height: 200px;
  }
  

• 在过渡元素及其对应的hover伪类中同时设置transition时，hover中设置的正向过渡会覆盖过渡元素中设置的正向过渡。此时过渡元素中设置的过渡效果只适用于反向过渡。
  

  分别设置正向和反向过渡

  CSS代码

  .block{
  	width: 100px;
      height: 100px;
      background-color: cadetblue;
      /* 反向过渡写在这里 */
      transition: height 0.2s linear 0s;
  }
  .block:hover{
      height: 200px;
      /* 正向过渡写在这里 */
      transition: height 1s linear 0s;
  }