javascript - 如何向此按钮添加 CSS 动画？

Question

我有一组 4 个手风琴标签，当悬停在上面时高度会增加。我正在尝试添加一个 CSS 动画，以便在它的非活动高度到悬停时的高度之间有一个平滑的过渡。我也希望它是一个平稳的过渡。

到目前为止，我已经尝试使用动画对象类中的高度：

button.accordions:hover {
  transition: height 0.5s ease;

  height: 75px;
}

这导致按钮在悬停时根本不会改变高度。

这是我的JSFiddle的链接

标签： javascripthtmlcsscss-animations

Answer 1

该transition属性应设置在button.accordions选择器内，而不是button.accordions:hover选择器内。

button.accordions {
    max-height: 0;
    transition: max-height 0.5s ease;
}
button.accordions:hover {
    max-height: 75px;
}