操作CSS3过渡使用jQuery创建一个拖放文本效果

CSS3过渡是伟大的，他们帮助卸载从JavaScript繁琐的工作，当它涉及到在网页上执行的过渡效果，如从点A到B的移动元素，褪色/或基本上任何影响，涉及的变化一个CSS属性值到另一个。 是CSS3的动画是真棒，但让我们面对它，CSS3是不是一种编程语言（是正确的），并且无法比拟的JavaScript逻辑实力。 这意味着，虽然你可以使用CSS3实现大多数的过渡效果，经常倍的JavaScript仍然需要擦亮其关闭，并达到想要的结果。 在本教程中，我们将研究如何JavaScript可以通过以下方式帮助CSS3过渡：

• 动态设置和重置价值的CSS3属性
• 当一个CSS3过渡已经完成，通过transitionend事件。

我们将实现一个拖放文本的例子与我们新发现的知识，其中的每个字符的头依次下降之遥，直到最后，在这头复位本身。

我们将使用jQuery 1.8 +本教程为基础，当它涉及到CSS3，你很快就会看到如何工作，因为它提供了很多方便。

设置CSS的jQuery和CSS3属性

jQuery中设置的CSS属性是很简单的，使用.css()方法：

$（“＃myElement的”），CSS（{左：0，背景颜色：“蓝色”}）

这设置的元素＃myElement的“ left “和” background-color “属性为指定的值。

当谈到设置CSS3属性值，事情得到了很多毛茸茸的真正的快速。 这是因为所有的的CSS3供应商前缀（即-moz- ， -webkit-等）有交代时设置基线属性。 要设置“ transform “的CSS3属性，在jQuery的代码可能看起来像这样：

$（“＃myElement的”），CSS（{ 
变换：'translateY的rotateZ（120度）'，（300像素） 
MozTransform：'translateY的（300像素）rotateZ（120度）'， 
WebkitTransform：'translateY的（300像素）rotateZ（120度）'， 
translateY的msTransform：'（300像素）rotateZ（120度）' 
}）

做了几次，你会想重新做的最后一件事是使用JavaScript设置CSS3属性！

是个好消息，然而，这也是jQuery的进场。 在jQuery 1.8开始，框架会自动检测和设置为你的浏览器所支持的CSS3属性，让您的工作与基线的CSS3属性。 因此，在jQuery 1.8 +，上面的代码将是：

$（“＃myElement的”）。CSS（{translateY的变换：'（300像素）rotateZ（120度）'}）