webkitTransition，這對CSS-3意味着什麼，使用Jquery？

請看看下面的代碼：webkitTransition，這對CSS-3意味着什麼，使用Jquery？

$(document).ready(function() { 
    var defaults = { 
     duration: 4000, 
     easing: '' 
    }; 

    $.fn.transition = function (properties, options) { 
     options = $.extend({}, defaults, options); 
     properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing; 
     console.log(properties); 
     $(this).css(properties); 
    }; 

    $('.element').transition({ 
     background: 'red' 
    }); 

});

我只是通過famious article閱讀網上，如果你去，說：「編程轉換」，日子會把你明白我講的部分，現在的CSS-3編碼的動畫時，我是用下面了Syntex：

-webkit-transform: .3s; 
-moz-transform: .3s; 
-ms-transform: .3s; 
-o-transform: .3s;

但是創建CSS-3的轉變時，我看到了很多的東西，象下面這樣：

var transEndEventNames = { 
    WebkitTransition : 'webkitTransitionEnd', 
    MozTransition : 'transitionend', 
    OTransition  : 'oTransitionEnd otransitionend', 
    transition  : 'transitionend' 
}

什麼是WebkitTransition,MozTransition等？

在我提供的第一個示例中，什麼是webkitTransition？雖然看起來很明顯，但這些事情意味着什麼，完全避開了我作爲JS新手。

會認真地感謝genuin ttemp來回答我的問題。

編輯::：我只是想回答下面的問題。

是在過渡的JS平衡到CSS-3？爲什麼使用大寫的語法。正如有人在下面的評論中指出的那樣，我知道jQuery會自動添加前綴。

謝謝。

Alex-Z。

來源

2015-04-01 Alexander Solonik

這些都是針對特定瀏覽器CSS屬性名稱前綴，他們不是因爲jQuery的'.css（）'方法會[自動添加瀏覽器特定的前綴，如果需要的話]（http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes）。 – Blazemonger 2015-04-01 17:38:43

@Blazemonger，謝謝！哪個版本的Jquery是關於什麼的？ – 2015-04-01 17:42:00

@Blazemonger！上述功能也是過時的。 – 2015-04-01 18:02:50

是轉型JS equililent到過渡是CSS-3

是的，一個「JS過渡」是相同的一個CSS過渡。這只是一個問題，在哪裏以及如何創建和觸發這些轉換，但結果是一樣的。

爲什麼大寫語法

這是一個命名約定。所有的CSS禮儀都在CSSStyleDeclaration上「命名」爲駝峯：

element.style["-webkit-transition"] = "all 1s" 
or 
element.style.WebkitTransition = "all 1s"

它：

partial interface CSSStyleDeclaration { [TreatNullAs=EmptyString] attribute DOMString _camel_cased_attribute; 
};

http://dev.w3.org/csswg/cssom/

所以，你可以爲以下過渡/ CSS禮分配給一個元素同樣的東西

我打開你的瀏覽器控制檯並輸入：document.body.style你會注意到你在CSS a中寫的所有東西小號-prefix-propriety將被「存儲」作爲PrefixPropriety

我明白了jQuery的自動添加前綴

適合他們

來源

2015-04-01 19:32:12 Mircea

！ thx超級明星！ – 2015-04-01 19:44:29

webkitTransition，這對CSS-3意味着什麼，使用Jquery？

回答

相關問題