CSS动画不会在加载时触发

时间:2019-02-14 22:28:35

标签: html css

我在Angular应用中将hover.css(https://github.com/IanLunn/Hover)用于某些CSS动画。当我将鼠标悬停在元素上时,我可以使以下内容正常工作,但我希望它在负载下工作而没有交互。

当前状态:

.hvr-buzz-out .hovered {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
<h3 class="item-name text-white hvr-buzz-out active" id="item-name">{{results.item_name}}</h3>

我还尝试了jQuery将NgOnInit()中的“活动”类附加到无效。请注意,动画仍然可以在悬停上工作,但是我希望它可以立即进行而无需干预。

0 个答案:

没有答案