javascript - webkitTransition ，这对使用 Jquery 的 CSS-3 意味着什么？

Question

请看下面的代码:

$(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 中编码动画时我习惯了下面的语法:

-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 新手难以理解。

非常感谢真正的尝试来回答我的问题。

编辑:::我只想回答以下问题。

JS 中的过渡是否等同于 CSS-3 中的过渡？？为什么大写语法。正如有人在下面的评论中指出的那样，我知道 jquery 会自动添加前缀。

谢谢。

亚历克斯-Z。

Answer 1

is Transition in JS equililent to transition is CSS-3

是的，“JS 转换”与 CSS 转换相同。这只是在何处以及如何创建和触发这些转换的问题，但结果是相同的。

Why the uppercase syntax

这是一个命名约定。所有 CSS 特性在 CSSStyleDeclaration 中都被“命名”为驼峰式大小写:

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

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

因此您可以按如下方式为元素分配过渡/CSS 特性:

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

是一样的

如果您打开浏览器控制台并输入:document.body.style 您会注意到您在 CSS 中编写的所有内容 -prefix-propriety 都将被“存储”作为 PrefixPropriety

i get it that jquery added prefixes automatically

对他们有好处