zoukankan      html  css  js  c++  java
  • Css3 过渡(Transition)特效回调函数

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

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

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

       #waterDiv
    		{
    		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“其它浏览器的内核也会有影响,客观能够尝试一下

    终于就是


  • 相关阅读:
    TPM Key相关概念
    (转)eclipse报错及解决说明 "XX cannot be resolved to a type "
    (转)Bat Command
    (转)Linux下查看文件和文件夹大小 删除日志
    (转)每天一个linux命令(50):crontab命令
    (转)Vi命令详解
    (转)maven打包时跳过测试
    (转)mybatis常用jdbcType数据类型
    (转)MyBatis在插入的数据有空值时,可能为空的字段都要设置jdbcType
    (转)mybatis:动态SQL
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6991116.html
Copyright © 2011-2022 走看看