CSS3之transition

歡迎訪問我的博客

JavaScript是單線程執行的,代碼是一句一句執行的,而異步任務,如定時器或者動畫,會被壓入執行隊列,在線程空閑時執行。在CSS3動畫出現之前,我們通常使用定時器和JavaScript實現動畫效果,但是由于JavaScript單線程執行,很容易發生動畫卡頓,效果較差。CSS3提供的過渡(transition)、動畫(animation)、變換(transform)能比較好的為我們展現不同的動畫效果,因此有必要對其進行了解、學習,本篇開始介紹CSS3之過渡。

過渡(transition)

CSS過渡支持我們在改變CSS屬性時控制動畫的變化效果。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,并圓滑地以動畫效果改變CSS的屬性值。

CSS過渡在獨立于JavaScript執行線程的另一個線程里執行,JavaScript的執行不會阻塞CSS動畫,使得應用動畫效果更加流暢。

CSS3過渡簡潔語法如下:


    transition: [property] [duration] [timing-function] [delay];
  • property,屬性名稱;

  • duration,過渡動畫持續的時間;

  • timing-function,動畫執行時間變化函數;

    • ease-in,動畫變化逐漸變快;
    • ease-out,動畫變化逐漸變慢;
    • ease-in-out,動畫先逐漸變快然后逐漸變慢;
    • linear,線性動畫變換;
    • cubic-bezire(x1, y1, x2, y2),定義動畫時間變化曲線
    • step(number, type),定義動畫變化區段塊

    關于動畫變化函數更多,請查看https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

  • delay,過渡動畫屬性變化延遲執行時間。

注:可以一次聲明多個過渡變化,以逗號分隔。

CSS3過渡子屬性語法

我們可以通過CSS過渡子屬性分別控制CSS3過渡動畫模塊:

  • transition-property:定義將要使用CSS3過渡動畫的單個或多個CSS屬性名稱
  • transition-duration:定義發生過渡動畫的單個或多個CSS屬性所對應過渡動畫執行所需時間
  • transition-timing-function:定義CSS3過渡動畫過程中屬性值與時間的變化函數
  • transition-delay: 定義過渡動畫屬性變化延遲執行時間

CSS3過渡動畫實例

觀看CSS3過渡實例請進入

html代碼:


    <body>
    <p>The box below combines transitions for: width, height, background-color, transform. Hover or click over the box to see these properties animated.</p>
    <button class="trans_btn" onclick="document.querySelector('.box').className='trans box'">單擊觸發過渡動畫</button>
    <br><br>
    <div class="box"></div>
    <br>
</body>

CSS樣式:


    .box {
            border: 1px solid #FFCCCC;
            display: block;
            width: 100px;
            height: 100px;
            background-color: #0000FF;
            -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
            transition: width 2s, height 2s, background-color 2s, transform 2s;
        }

        .box:hover {
            background-color: #FFCCCC;
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .trans.box {
            background-color: #FF0000;
            width: 300px;
            height: 300px;
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

CSS3過渡與transitionend

CSS屬性發生過渡變化時,除了會執行CSS相應的指定變化,還會在完成時觸發transitionend事件。

transitionend

transitionend 事件在 CSS 完成過渡后觸發。如果過渡在完成前移除,例如transition-property屬性被移除,此事件將不被觸發。

語法如下:

    
    // Safari 3.1 到 6.0 
    object.addEventListener("webkitTransitionEnd", myScript); 
    // 標準方式
    object.addEventListener("transitionend", myScript);       

無限彈動小球實例

無限彈動小球實例地址

html代碼:


    <div class="ball"></div>
    <div class="floor"></div>

css樣式:


    * {
            margin: 0;
            padding: 0
        }
        html, body {
            width: 100%:
            height: 100%;
        }
        .ball {
            background-color: blue;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 30px;
            left: 20px;
            border-radius: 50px;
        }
        .floor {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
        }

JavaScript代碼:


    <script>
        window.onload = function() {
            var down = false;
            var transition = 'transition';
            var transitionend = 'transitionend';
            var ball = document.querySelector('.ball');
            var floor = document.querySelector('.floor');

            //事件注冊兼容
            window.EventHandler = function () {
                if (window.addEventListener) {
                    EventHandler = function(ele, type, callback, bubble) {
                        return ele.addEventListener(type, callback, bubble);
                    }
                } else if (window.attachEvent)  {
                    EventHandler = function(ele, type, callback, bubble) {
                        return ele.attachEvent('on' + type, callback);
                    }
                }else {
                    EventHandler = function(ele, type, callback, bubble) {
                        ele['on' + type] = errorReport;
                    }
                }
            };
            EventHandler(window);

            //叛定瀏覽器前綴
            if (typeof document.body.style.webkitTransition === 'string') {
                transition = 'webkitTransition';
                transitionend = 'webkitTransitionEnd';
            }else if (typeof document.body.style.MozTransition === 'string') {
                transition = 'MozTransition';
            }

            //小球彈動實現
            function bounceBall(ball) {
                var ball = ball || document.querySelector('.ball');
                if (down) {
                    ball.style[transition] = 'top 1s cubic-bezier(0, 0.27, 0.32, 1)';
                    ball.style.top = '30px';
                    down = false;
                }else {
                    ball.style[transition] = 'top 1s cubic-bezier(1, 0, 0.96, 0.91)';
                    ball.style.top = (floor.offsetTop - 100) + 'px';
                    down = true;
                }
            }

            //注冊transitionend事件,實現無限彈動效果
            EventHandler(ball, transitionend, function(e) {
                bounceBall(e.target);
            });
            EventHandler(ball, 'click', function(e) {
                bounceBall(e.target);
            });

            bounceBall(ball);
        };
    </script>

本篇對CSS3過渡進行了基本講解和拓展,并給出了兩個實例,供參考。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,328評論 0 11
  • 知道了CSS3三劍客之一的transform可以用來讓原本規規矩矩的元素產生變形,平移,旋轉一樣的旋轉,接下來使用...
    LuckyJing閱讀 13,745評論 3 12
  • CSS transitions提供了一種在更改CSS屬性時控制動畫速度的方法詳解點這 。 其可以讓屬性變化成為一個...
    fenerchen閱讀 326評論 0 2
  • transition屬性允許css的屬性值在指定的時間內進行過度,也就是執行動畫效果。它是以hover,focus...
    Mescal川閱讀 280評論 0 0
  • 1.CSS3 邊框 border-radius CSS屬性用來設置邊框圓角。當使用一個半徑時確定一個圓形;當使用兩...
    garble閱讀 665評論 0 0