Question

我试图应用＆＃34;反弹＆＃34;从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

CSS翻译已翻译的元素

1 个答案: