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度)'})