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。

这些都是针对特定浏览器CSS属性名称前缀，他们不是因为jQuery的'.css（）'方法会[自动添加浏览器特定的前缀，如果需要的话]（http://*.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的自动添加前缀

适合他们

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

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

相关推荐