动画元素的初始状态答案

【问题标题】：Initial state of element to be animated in动画元素的初始状态
【发布时间】：2015-12-22 16:15:15
【问题描述】：

我有一个我想在屏幕外开始的元素，但是在单击链接时，该元素会被动画化（使用 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 是否有意义。

非常感谢您的任何帮助！

【问题讨论】：

要将其隐藏在屏幕之外，我个人会向左：-（元素宽度）
@aw04 恐怕这行不通。
什么意思，它只是一个值。会发生什么？
好吧，正如您在问题中看到的那样，我已经尝试使用负值将其移出隐藏元素的屏幕，但随后它不会对其进行动画处理。它只是停留在屏幕外。
实际上，现在我想起来了……我不确定你需要对 animate.css 做任何事情。它不会为你解决这个问题吗？

标签： javascript jquery css animate.css

【解决方案1】：

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

JS Fiddle

CSS

.services-panel__secondary {
  display: none;
}
.show {
  display: block;
}

$('.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

【讨论】：

【解决方案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;
  }
}

【讨论】：