CSS翻譯已經翻譯的元素

我試圖將animate.css的「反彈」效果應用於已具有以下屬性的元素（由第三方JS庫添加）：CSS翻譯已經翻譯的元素

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上是否有變體會應用反彈效果，而不會通過樣式屬性覆蓋元素上已有的變換？我真的不想侵入第三方庫來包裝元素或任何東西，除非我可以幫助它。

在此先感謝。

來源

2014-06-11 Aiden Bell

的問題是，'歡迎使用屬性translate'是重寫，你最好的選擇將是上應用的CSS動畫一個已經翻譯過的div的孩子，所以你不會覆蓋父母的翻譯屬性 –

你正在嘗試擁有相關的動畫，這些動畫還不存在。 – TJHeuvel

如果您想要相對動畫，您必須將它包裝在另一個元素中。你不必爲了這樣做而入侵第三方庫。你可以動態地插入一個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);

來源

2014-06-11 15:01:14 jwahdatehagh

是的，我使用這種方法得到它的工作。看到@TJHeuvel說相關的動畫還沒有存在，這看起來是我唯一的選擇。在我的情況下，這是一個巨大的黑客攻擊，但接受的答案，除非有更好的出現。 –

CSS翻譯已經翻譯的元素

回答

相關問題