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功能，当视口中出现按钮时，我会添加类.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类中，就可以使用transform属性移动元素。

.link {
  display:inline-block;
 }

如果此解决方案不起作用，那么如果您可以提供示例，则可以使修复变得更加容易。

Answer 2

我已经通过首先移除元素然后将其放回效果来更改JS的代码。这使CSS的效果从头开始：

$('.parent .link').appear();
$('.parent .link').on('appear', function(event, $elements) {
    $(this).addClass('effect');
    var id = $(this).closest(".parent").attr('id');
    var $button = $(this).detach();
    $button.appendTo(("#"+id+" .parent"));
});

addClass上的动画类不起作用

2 个答案: