Question

我有一个元素，我想开始屏幕，但然后点击一个链接，该元素被动画（使用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是否合理。

非常感谢任何帮助！

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

Answer 2

animate.css实际上是通过它的动画照顾你的。查看bounceInRight的来源（您正在使用）。如您所见，它使用transform: trasnslate3d(...)移动x值。如上所述 @ dwreck08（+1），你只需要担心隐藏/显示。

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

要动画的元素的初始状态

2 个答案: