鼠标移出时颠倒元素过度效果

今天有一个小伙伴在群里问，怎么让鼠标经过的移出效果和移入效果相反。

比如说
移入的时候先让元素增加宽度，接着增加高度，最后显示内部元素，
鼠标移出的时候，先收缩高度隐藏元素，最后还原宽度。

看了一些回复有些答非所问，或者推荐用 Js 的。
最开始想的是，animation 是不是有一个 direction 属性可以设置反向么，
就想看 transition 是不是也有，但是并没有。CSS transition - MDN
所以就想着用 :hover 来覆盖原先的 transition

精简后的 CSS 片段

/* 导航元素 */
.nav-item {
  width: 125px;
  height: 45px;
  /* 默认鼠标移出的补间 width 延迟.5s height 延时.3s */
  transition: width 0.4s 0.5s, height 0.4s 0.3s;
}
.nav-item:hover {
  width: 200px;
  height: 83px;
  /* 鼠标移入的补间 width 无延迟 height 延时.3s*/
  transition: width 0.4s, height 0.4s 0.3s;
}

/* 子元素 */
.nav-item a {
  opacity: 0;
  /* 默认的补间 opacity 无延迟 */
  transition: opacity 0.4s;
}
.nav-item:hover a {
  opacity: 1;
  /* 鼠标移入的补间 opacity 延迟.5s */
  transition: opacity 0.4s 0.5s;
}

:hover 内的是鼠标移入补间，默认的是鼠标移出的补间，
并且配合 transition-delay 来达成补间动画执行的顺序。

当鼠标移入 nav-item 时 :hover 内的 transition 会覆盖原先的补间，
所以先是 无延时 的宽度改变，然后是 .3s 延时的高度改变，最后是 .5s 延时的子元素透明度补间。

等鼠标离开 nav-item 时 transition 就恢复成默认的，先改变 无延时 的子元素透明度，然后是 .3s 的高度改变，最后是 .5s 延时的宽度改变。

当然可以随意修改 transition-delay 来达到不同的补间动画执行顺序。

来看一下完成之后的 DEMO 吧！

附

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

所以使用时尽量按照此顺序书写

.tween {
  transition: margin-right 2s ease-in-out 0.5s;
  /* 依次为:需要过渡的属性,持续时间,变化曲线,开始之前的等待时间 */
}
/* 等同于 */
.tween {
  transition-property: margin-right; /* 需要过渡的属性 */
  transition-duration: 2s; /* 持续时间 */
  transition-timing-function: ease-in-out; /* 变化曲线 可以忽略不写 默认为 ease */
  transition-delay: 0.5s; /* 开始之前的等待时间 可以忽略不写 默认为 0 */
}

如果需要用到多个过度属性可以使用 all 来设置 transition-property，
但是如果过度效果是不同的需要单独设置并且使用 , 来分割。

/* 设置多个不同过度属性 */
.tween {
  transition: width 0.4s, height 1s 0.3s;
}