要动画的元素的初始状态

Question

我有一个元素，我希望从屏幕开始，但随后单击 link，该元素就会动画化（使用 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; 隐藏它，然后添加一个额外的 class 来添加 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() 而不是添加 class:

JS Fiddle

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

最后

如果您可以直接编辑 html，则可以直接添加 animate.css class 并且只添加 show() 元素：

JS Fiddle

在html中添加classes并用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)，你只需要担心 hide/show.

@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;
  }
}

Answer 3

允许动画进出的解决方案

此示例代码来自 Animate.css 自己的文档。我对其进行了扩展，包括添加和删除 show class，动画完成后它将保持状态。

const animateCSS = (element, animation, prefix = 'animate__') => {
    // Create a Promise and return it
    new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);

        // Add class to display element when animating in
        if (animation.indexOf('In') >= 0)
            node.classList.add('show');

        node.classList.add(`${prefix}animated`, animationName);

        // When the animation ends, we clean the classes and resolve the Promise
        function handleAnimationEnd(event) {
            event.stopPropagation();

            // Remove class to display element when animating out
            if (animation.indexOf('Out') >= 0)
                node.classList.remove('show');

            node.classList.remove(`${prefix}animated`, animationName);
            resolve('Animation ended');
        }

        node.addEventListener('animationend', handleAnimationEnd, { once: true });
    });
}

将初始样式设置为 display: none 并使用 display: block 创建 show class。然后调用我们创建的方法如下：

animateCSS('.services-panel__secondary', 'bounceInright');

要动画的元素的初始状态

Initial state of element to be animated in

javascript

jquery

css

animate.css