[英]How to combine transforms in CSS?
我有一個CSS動畫,它使用轉換相對於其當前位置來回移動。
CSS
fish {
animation: fishanimation 4s ease-in-out infinite alternate;
}
@keyframes fishanimation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(80px);
}
}
現在,我想使用javascript動態調整比例和旋轉,但是正在運行的css動畫會覆蓋它。 轉換不合並:(
使用Javascript
this.div.style.transform = "scale(0.4) rotate(45deg)";
是否可以將比例和旋轉應用於已經存在的轉換? 就像是:
element.transform = element.transform + "scale(0.4) rotate(34deg)";
編輯:
這不是問題的重復: 如何組合CSS轉換 。 這個問題的重點是元素可能已經具有我不想覆蓋的轉換。 我想添加它,而實際上不知道當前的轉換狀態是什么。
如前所述, 我建議您為此使用動畫庫 ,一個很好的例子是Velocity JS 。
如果沒有建議的庫,請繼續閱讀!
如果您希望在以前的轉換之上進行多次轉換,則需要使用matrix
值進行轉換。 矩陣使事情變得有些復雜。 矩陣的參數按以下順序:-
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());
讓我們使用從您提到的初始魚動畫開始的示例:-
fish {
animation: fishanimation 4s ease-in-out infinite alternate;
}
@keyframes fishanimation {
0% {
transform: matrix(1, 0, 0, 1, 0, 20);
}
100% {
transform: matrix(1, 0, 0, 1, 0, 80);
}
}
要在JavaScript中動態更改此設置,將需要進行一些不愉快的字符串操作並獲取元素的transform屬性(這比您想象的要尷尬)。 這是您可能如何做的一個例子。
function getTransformValues(obj) {
var transform = {
scaleX: 1,
skewX: 0,
skewY: 0,
scaleY: 1,
translateX: 0,
translateY: 0
};
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
transform.scaleX = parseFloat(values[0]);
transform.skewY = parseFloat(values[1]);
transform.skewX = parseFloat(values[2]);
transform.scaleY = parseFloat(values[3]);
transform.translateX = parseFloat(values[4]);
transform.translateY = parseFloat(values[5]);
}
return transform;
}
var values = getTransformValues($('#test'));
console.log(values);
// Object {scaleX: 1, skewX: 0, skewY: 0, scaleY: 2, translateX: 50, translateY: 40}
現在,您已經有了這些值,可以通過僅更改所需的值來開始創建一個新的矩陣,例如:-
var old = {
scaleX: 1,
skewX: 0,
skewY: 0,
scaleY: 2,
translateX: 50,
translateY: 40
};
$('#test').css('transform', 'matrix(' + old.scaleX + ', ' + old.skewY + ', ' + old.skewX + ', ' + old.scaleY + ', ' + old.translateX + ', ' + old.translateY + ')');
如果要開始操縱旋轉角度,事情會變得更加復雜 。 為了避免過多地阻塞這個答案,問題的這一部分在以下鏈接中提供了一個解決方案:在jQuery中獲取元素-moz-transform:rotate值
希望您能明白為什么至少在撰寫本文時采用Velocity JS之類的庫是實現快速,輕松,干凈和流暢的跨瀏覽器動畫的最佳方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.