gpt4 book ai didi

javascript - CSS Translate 已经翻译的元素

转载 作者:行者123 更新时间:2023-11-28 17:40:46 25 4
gpt4 key购买 nike

我正在尝试将 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com