我正在尝试将 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 是否有变体,可以应用反弹效果,而不通过 style 属性覆盖元素上已有的变换?我真的不想侵入第三方库来包装元素或任何东西,除非我可以帮助它。
提前致谢。
最佳答案
如果您想要相对动画,则必须将其包装在另一个元素中。 您不必侵入第三方库即可执行此操作。您可以动态插入 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
关于javascript - CSS Translate 已翻译的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24165756/