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="">