CSS翻译已翻译的元素

Question

我试图将animate.css中的“弹跳”效应应用于已经在其样式元素中具有以下属性的元素(由第三方JS库添加)：

style="... transform: translate(625px, 471px); ..."

当应用以下弹跳动画时：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

元素在动画之前的位置不固定，元素移动到页面的顶部并在那里动画。

在这个CSS上是否有一个变化，它将在不通过样式属性覆盖元素上的转换的情况下应用弹跳效果？我真的不想黑进第三方库来包装元素或任何东西，除非我能帮上忙。

提前谢谢。

Answer 1

如果您想要相关的动画，您必须将它包装在另一个元素中。您不需要黑入第三方库就可以做到这一点。您可以在不影响现有代码的情况下动态插入div。

我会做以下几件事：

// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);

在这里阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Node.replaceChild