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

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

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

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

精简后的 CSS 片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 导航元素 */
.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-itemtransition 就恢复成默认的,先改变 无延时 的子元素透明度,然后是 .3s 的高度改变,最后是 .5s 延时的宽度改变。

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

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

transition CSS 属性是 transition-propertytransition-durationtransition-timing-functiontransition-delay 的一个简写属性。

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

1
2
3
4
5
6
7
8
9
10
11
.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
但是如果过度效果是不同的需要单独设置并且使用 , 来分割。

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