Css3 过渡（Transition）特效回调函数

Css3 出来之后，能够说是替代了Flash，通过使用Html5和Css3的完美结合。就能够做出不论什么你想得到的特效，这里不再阐述。。。

近期在做一个喝水签到的功能。在想签到成功之后，签到框能够模拟被水充满的效果。如图

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

这是一个简单的颜色过渡，几行代码就完毕了我想要的效果，

   #waterDiv

		{

		width:100px;

		height:100px;

		display: block;

		margin-top: 200px;

		background:gray;

		transition:background-color 2s;

		-moz-transition:background-color 2s; /* Firefox 4 */

		-webkit-transition:background-color 2s; /* Safari and Chrome */

		-o-transition:background-color 2s; /* Opera */

		border-radius:50px;

		}

上面的代码是刚開始的灰色圆，注意“transition”（w3c讲的比我具体。点击表格进入w3c学校）

给某个标签加上要过渡的标志，我想让waterDiv颜色在点击的时候由灰变蓝，就能够这样写（这里使用的是javascript原生代码，方便后面的事件监听）

       function checkIn(){

		var yuan = document.querySelector('#waterDiv');

                yuan.style.backgroundColor = "#87CEFF";

	}

<div id='waterDiv' onclick="checkIn()"></div>

好了。问题来了。我想让在圆颜色过渡之后进行一个提示，比方“签到成功”。一般的jquery会为我们提供一个CallBack函数。可是这样的css怎么知道过渡完毕了呢？

这里就须要使用js来监听过渡结束事件

                yuan.addEventListener('webkitTransitionEnd', function () {

			alert('its ok');

			// callback here

		}, false);

  		yuan.addEventListener('transitionend', function () {

			//alert('its ok');

			// callback here

		}, false);

默认的事件是”transitionend“其它浏览器的内核也会有影响，客观能够尝试一下

终于就是

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">