我有一个元素,我想从屏幕开始,但点击链接后,该元素被动画化(使用 animate.css)。但是,我不确定使用什么 css 方法将该元素隐藏在屏幕之外,以便它可以在屏幕上显示动画。
我使用的js是:
$('.services-wrapper').on('click','.services-panel__cta',function(e){
e.preventDefault();
$('.services-panel__secondary').addClass('animated bounceInright');
})
我已经尝试过:
position: absolute;
left: 100%
和
left: -9999px
但我不确定尝试 tbh 是否有意义。
非常感谢收到的任何帮助!
最佳答案
使用 animate.css,您不需要事先指定位置。您可以使用 display: none;
隐藏它,然后添加一个额外的类来添加 display: block;
。
CSS
.services-panel__secondary {
display: none;
}
.show {
display: block;
}
JS
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').addClass('show animated bounceInRight');
})
或者只使用 show()
而不是添加类:
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').show().addClass('animated bounceInRight');
});
最后
如果您可以直接编辑 html,则可以直接添加 animate.css 类,只需 show()
元素即可:
在html中添加类并用display: block;
隐藏
<div class="services-panel__secondary animated bounceInRight">
Bounce this in
</div>
JQuery- 只需显示它,它就会反弹。
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').show();
})
重要:
对于 animate.css,请注意“right”应该有一个大写的“R”,如 bounceInRight
关于javascript - 要动画的元素的初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34420059/