css變形 transform

時間 2019-11-10

標籤 css 變形 transform 欄目 CSS 简体版

原文原文鏈接

transition：過分屬性

transition-property 規定設置過分效果的css屬性的名稱，默承認以寫allcss
transition-duration 規定完成過分效果須要多少秒或毫秒html
transition-timing-function: 默認easetransition-delay：延時時間ide
- ease:逐漸變慢
- linear:勻速
- ease-in:加速
- ease-out:減速
- ease-in-out:先加速在減速
- cubic-bezier：貝塞爾曲線

transitionend：過分完成事件this

1 function addEnd(obj,fn){
2     obj.addEventListener('WebkitTransitionEnd',fn,false);
3     obj.addEventListener('transitionend',fn,false);
4 }
5 function removeEnd(obj,fn){
6     obj.removeEventListener('WebkitTransitionEnd',fn,false);
7     obj.removeEventListener('transitionend',fn,false);
8 }

注：1在transition裏，若是寫了多個，那沒改變一次樣式，就會觸發一次事件
　　2注意重複觸發transitionend事件。好比下面重複改變div的y軸位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
 8     </style>
 9 </head>
10 <body>
11 <div id="nav"></div>
12 <script>
13     var oHome=document.getElementById("nav");
14     var count = 10;
15     oHome.onclick = function(){
16         count += 20;
17         oHome.style.transform = 'translate(0,'+ count +'px)'
18         addEnd(this,function(){
19             count += 20;
20             oHome.style.transform = 'translate(0,'+ count +'px)'
21         })
22     }
23     function addEnd(obj,fn) {
24         obj.addEventListener('WebkitTransitionEnd',fn,false);
25         obj.addEventListener('transitionend',fn,false);
26     }
27 </script>
28 </body>
29 </html>