要在其中设置动画的元素的初始状态

Initial state of element to be animated in

本文关键字：元素 初始状态 动画 在其中 设置      更新时间：2023-09-26

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

真的很感激你的帮助！

使用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

animate.css实际上通过它的动画为您处理了这个问题。检查boundInRight（您正在使用的）的来源。如您所见，它使用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;
  }
}

一种允许在内外设置动画的解决方案

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

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类。然后调用我们用以下命令创建的方法：

animateCSS('.services-panel__secondary', 'bounceInright');
相关文章：