CSS3:過渡大全

時間 2019-12-09
標籤 css3 css 過渡大全欄目 CSS 简体版
原文原文鏈接
代碼地址：http://jsbin.com/moquyesumi/edit?html,output

<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>過渡</title>
<style>
 /**************************************************注意**********************************
 1，(區分過渡和動畫)：過渡由事件觸發。
 2，(事件以後樣式自動去除以後）事件不存在(hover樣式自動去除，hover結束)，返回原來樣式
 ********/
    
  /*0，要過渡的樣式：all 和不寫默認所有*/
  /*要添加多個樣式的變換效果，添加的屬性由逗號分隔：*/
.box0{width:100px;height:100px;background:red;opacity:0.1; transition:height 5s, width ,5s;}
.box0:hover{ background:blue;width:200px;opacity:1;height:300px;}
  
  /*1，過渡時間*/
.box1{width:100px;height:100px;background:red; transition:500ms;}
.box1:hover{ background:blue;width:200px;height:200px;}
  
  /*2，延時時間：3s後過渡 */
.box2{width:100px;height:100px;background:red; transition:width 2s 1s;}
.box2:hover{ background:blue;width:200px;height:200px;}
  /*3，運動形式 
  ease：（逐漸變慢）默認值
  linear：（勻速）
  ease-in：(加速)
  ease-out：（減速）
  ease-in-out：（先加速後減速）
  cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ） 
  http://matthewlein.com/ceaser/
  */
.box3{width:100px;height:100px;background:red; transition:width 5s 1s ease-out;}
.box3:hover{ background:blue;width:500px;height:200px;}
  /*4，貝塞爾曲線能夠設置過渡的過程當中，超出最終值，最後仍是到最終值*/
.box4{width:100px;height:100px;background:red; transition:width 5s .2s cubic-bezier(0.000, 1.650, 0.625, 1.650);}
.box4:hover{ background:blue;width:500px;height:200px;}
 /*********************************其餘事件觸發過渡（js控制）**********************************************/
  
  
  
.box5{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
.box5:hover{ background:blue;width:200px;height:200px;}
  /*click觸發:注意和css僞類hover區別，觸發了就過渡到改變以後的樣式，不像hover那樣返回原來*/
 .box6{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
 .box6click{background:blue;width:200px;height:200px;}/* transition:all 2s .1s ease-in;*/
 /*.box6click2{width:100px;height:100px;background:red;}*/
  
 /*添加過渡完事件
  Webkit內核： obj.addEventListener('webkitTransitionEnd',function(){},false);
  firefox: obj.addEventListener('transitionend',function(){},false);
  */
  /*移除過渡完事件
  Webkit內核： obj.removeEventListener('webkitTransitionEnd',function(){},false);
  firefox: obj.removeEventListener('transitionend',function(){},false);
  */
  #box7{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  #box8{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  #box9,#box10{width:100px;height:100px;background:green;}

</style>
  <script>   
   
    
      window.onload=function(){//onload 小寫~
       //封裝不一樣瀏覽器添加 過渡結束事件
        function addTranEndEvt(obj,fn){
          obj.addEventListener('webkitTransitionEnd',fn,false);
          obj.addEventListener('transitionend',fn,false);
        }
        //封裝不一樣瀏覽器移除 過渡結束事件
         function removeTranEndEvt(obj,fn){
          obj.removeEventListener('webkitTransitionEnd',fn,false);
          obj.removeEventListener('transitionend',fn,false);
        }

/***************觸發次數*************************/
        var div7=document.getElementById("box7");
        addTranEndEvt(div7,function(){
          alert('1個屬性過渡好');//過渡完（每改變一個樣式屬性，就會觸發一次end事件）
        })
        div7.onclick=function(){//結果注意：連續點下，會不斷的在最後過渡結果基礎上再過渡
          //每改變一個樣式屬性，就會觸發一次end事件
          this.style.width=this.offsetWidth+100+'px';
           this.style.height=this.offsetHeight+100+'px';
        }

/*******addEventListener註冊和removeEventListener移除必須爲同一個事件（多一層封裝）*************/
         var div8=document.getElementById("box8");
         /* addTranEndEvt(div8,function (){
           this.style.width=this.offsetWidth+200+'px';
           //這種移除監聽方法不行：
           //由於括號內的addTranEndEvt和外面的addTranEndEvt不是同一個
           //要想實現同一個，咱們必須封裝addWidth作爲addTranEndEvt的參數，
           //也能夠作爲removeTranEndEvt的參數
          removeTranEndEvt(this,addTranEndEvt);
        });*/
        function addWidth(){
           this.style.width=this.offsetWidth+200+'px';
           removeTranEndEvt(this,addWidth);
        }
       addTranEndEvt(div8,addWidth);
          div8.onclick=function(){
            this.style.width=this.offsetWidth+100+'px';
        }
        
  /**** addEventListener註冊和removeEventListener移除必須爲同一個事件（多一層封裝）*********/
           var div9=document.getElementById("box9");
        div9.addEventListener('click',function(){
          alert(1)
        })
         div9.removeEventListener('click',function(){
          alert(1)//無效，不能能移除
        })
        var div10=document.getElementById("box10");

         function dosth(){ alert(2)}
          var div10=document.getElementById("box9");
        div10.addEventListener('click',dosth)
         div10.removeEventListener('click',dosth)//能夠移除
    }
    
    
   $(function(){  
      $('.box6').click(function(){
        $(this).addClass("box6click");  
      })
      
      /* var i=0;
      $('.box6').click(function(){
        ++i; 
        console.log(i);
        if(i%2==1){
        $(this).addClass("box6click");  
          }
        else if(i%2==0){
          $(this).addClass("box6click2");  
          $(this).removeClass("box6click2");  
         }
      })*/
    })
    
  </script>
</head>
<body>
  <div class="box0">0</div>
    <hr/>
<div class="box1">1</div>
  <hr/>
  <div class="box2">2</div>
    <hr/>
  <div class="box3">3</div>
   <hr/>
  <div class="box4">4</div>

<hr/>
  <div class="box5">5</div>
  <hr/>
  <div class="box6">6</div>
    <hr/>
  <div id="box7">7</div>
    <hr/>
  <div id="box8">8</div>
      <hr/>
  <div id="box9">9</div>
  <hr/>
  <div id="box10">10</div>

</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。
CSS3:過渡大全

代碼 地址：http://jsbin.com/moquyesumi/edit?html,output

代碼地址：http://jsbin.com/moquyesumi/edit?html,output
