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

2023年8月16日 238次阅读

我有一个元素,我想在屏幕上开始,但然后点击一个链接,该元素被动画(使用animate.css).但是,我不确定使用什么css方法将该元素隐藏在屏幕之外,以便可以对其进行动画制作.

我正在使用的是：

$('.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;的附加类.

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”应该具有像bounceInRight一样的大写“R”

点赞