jquery - addClass 上的动画类不起作用

Question

我有以下效果类的 CSS:

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
.effect {
    animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

使用 jquery.appear 功能，我在视口(viewport)中出现按钮时添加类 .effect。该类确实已添加到按钮，但未按预期进行摇动。所以我猜你不能像我现在做的那样添加一个类来向用户展示效果。或者因为它曾经...

JS代码下方:

$('.parent .link').appear();
$('.parent .link').on('appear', function(event, $elements) {
    $(this).addClass('effect');
});

哪个正确地将类添加到下面的元素:

<a class="link effect" href="/new-page">
    <span>Click me</span>
</a>

Answer 1

在我的案例中，将您提供的代码放入笔中并简单地向 .link 或 .effect 类添加显示属性允许转换属性移动元素。

.link {
  display:inline-block;
 }

如果此解决方案不起作用，那么如果您可以提供一个示例，那么修复起来会容易得多。