Question

我有一组4个Accordian标签，它们悬停时高度会增加。我正在尝试添加CSS动画，以便将鼠标悬停在其非活动高度与其高度之间的平滑过渡。我也希望这是一个平稳的过渡。

到目前为止，我已经尝试使用动画来确定对象类内部的高度：

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

  height: 75px;
}

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

这里是指向我的JSFiddle

的链接

Answer 1

With error: module.js:549 throw err; ^ Error: Cannot find module 'C:\Client\npm' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Function.Module.runMain (module.js:693:10) at startup (bootstrap_node.js:188:16) at bootstrap_node.js:609:3属性应该在transition选择器中设置，而不是button.accordions选择器中。

button.accordions:hover

Answer 2

两件事！在您的小提琴中，您没有用于过渡的任何单元。只是transition: height 0.5 ease;，它缺少计时器的“ s”。

第二，您需要确定自己的身高起点-它不会从自动过渡。因此，例如，将height: 56px;类上的button.accordions设置为起点。

如果您希望过渡变大并缩小，请将transition: height 0.5s ease;从:hover中移出并将其粘贴在基础button.accordions上。

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

2 个答案: