javascript - 要动画的元素的初始状态

Question

我有一个元素，我想从屏幕开始，但点击链接后，该元素被动画化(使用 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 是否有意义。

非常感谢收到的任何帮助!

Answer 1

使用 animate.css，您不需要事先指定位置。您可以使用 display: none; 隐藏它，然后添加一个额外的类来添加 display: block;。

JS Fiddle

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() 而不是添加类:

JS Fiddle

$('.services-wrapper').on('click', '.services-panel__cta', function() {
  $('.services-panel__secondary').show().addClass('animated bounceInRight');
});

---

最后

如果您可以直接编辑 html，则可以直接添加 animate.css 类，只需 show() 元素即可:

JS Fiddle

在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