應用translate3d時CSS3 easeOutBack問題

如果我在選擇器上默認設置了translate3d屬性，然後通過添加其他類來更改translate3d，則會導致bounceOutBack立方體寬鬆功能無法工作。這似乎只是默認easeIn應用translate3d時CSS3 easeOutBack問題

.content { 
    width:200px; 
    height:200px; 
    background-color:red; 
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
    /*adding the below will mess up my bounceOutBack set above*/ 
    -webkit-transform: translate3d(0px, 0px, 0px); 
}

如果用translate3d的easeOutback以上設置不起作用添加這個類，下面，給。內容選擇。我沒有看到任何其他自定義緩動類型的問題。對不起，沒有創建一個小提琴看到這種情況發生。有誰知道爲什麼會發生這種情況？目前只在Chrome中進行測試。謝謝你的幫助。

.content.animate { 
    -webkit-transform: translate3d(300px, 0px, 0px); 
}

來源

2013-03-13 user1302387

你的隱含轉換爲0,0,0。我認爲沒有任何目的來指定它。對於一個簡單的方法來說，懸停動作對我來說很有效。再次看看，並添加一個簡單的懸停效果，以便在構建過渡時簡化操作。 – 2013-03-13 21:06:52

我知道設置0,0,0不需要設置。但是，實際上我正在做的事情是從-200px的translateX開始。我只是設置0,0,0來理解爲什麼會發生這種情況。我可以在其中放入任何數字，只要您從初始選擇器中指定它，則緩解不起作用。 – user1302387 2013-03-13 21:25:11

好吧，可能是某種Chrome的bug。

現在好的工作

.content { 
    width:200px; 
    height:200px; 
    background-color:red; 
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
    /*adding the below will mess up my bounceOutBack set above*/ 
    -webkit-transform: translate3d(0px, 0px, 0px); 
} 

body:hover .content { 
    -webkit-transform: translate3d(300px, 0px, 0px); 
}

fiddle

來源

2014-03-27 18:51:51 vals

應用translate3d時CSS3 easeOutBack問題

回答

相關問題