我在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()中的“活动”类附加到无效。请注意,动画仍然可以在悬停上工作,但是我希望它可以立即进行而无需干预。