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

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

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



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

#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“其他浏览器的内核也会有影响，客观可以尝试一下

最终就是