Javascript 對 CSS3 animation 動畫的流程的簡單控制

zhigoo 發(fā)布于2019-08-19 18:12 / 893人閱讀

摘要：的是一個好東西，能讓頁面動畫更加純凈流暢，但是之前一扯到動畫流程的控制比如執(zhí)行完第一個動畫后再執(zhí)行第二個動畫在執(zhí)行某個動作就有點懵逼如果是動畫呢，有回調函數(shù)或者，方便滴狠吶但是呢。。

CSS3的animation是一個好東西，能讓頁面動畫更加純凈流暢，但是之前一扯到動畫流程的控制（比如執(zhí)行完第一個動畫后再執(zhí)行第二個動畫在執(zhí)行某個動作）就有點懵逼

如果是jQuery動畫呢，有回調函數(shù)（或者.promise().done()），方便滴狠吶！但是animation 呢。。呢。。。呢。。。。呢。。。。。呢。。。。。。

粗粗的想一想吧，貌似給元素加上第一個動畫的類后根據(jù)第一個動畫的執(zhí)行時間來設置個延遲再加入第二個動畫的類也是可以實現(xiàn)的，但是總覺得這樣不干凈，而且setTimeout其實也不是那么的可控，

然后塔噠，就遇到這篇文章你若觸發(fā)，我就處理，講的是JS事件響應的，對， 事！件！響！應！。如果動畫結束時能有能觸發(fā)某個事件，JS再監(jiān)聽響應一下，這不就完事兒了嗎？

誒，萬能的JS還真有

CSS動畫事件 animationstart，animationend和animationiteration

看著三個事件名字就知道，這三個事件分別對應動畫開始前，動畫結束后，動畫進行中，不廢話了，直接上個demo

實現(xiàn)了個簡單的刪除動畫，第一步讓元素出視野，第二步讓元素height和margin,paddind等都塌陷，最后直接移除元素

有兩個自己覺得要注意的地方寫下注釋

on(".m1", "animationend", function() {
  // this.classList獲取的是一個DOMtokenList并不是真的數(shù)組所以要轉換一下
  var classlist = Array.prototype.slice.apply(this.classList);
  // 因為有兩個動畫，所以要判定是哪一個動畫結束了來執(zhí)行下一階段
  if (classlist.indexOf("dnone") == -1) {
    this.classList.add("dnone")
  } else {
    setTimeout(function() {
      this.parentNode.removeChild(this)
    }, 1000)
  }
})

on("button", "click", function() {
  select(".m1").classList.toggle("leave");
})

function select(selector) {
  return document.querySelector(selector)
}

function on(selector, eventName, cb) {
  select(selector).addEventListener(eventName, cb);
}

這么一看其實也是很簡單的哈哈,順帶一提起時transition過渡動畫也有個事件transitionend。

最后，兼容性

CSS3動畫相關屬性的兼容性可以看這里

animation事件，一般只需加兩種前綴就可以了
webkit前綴：webkitAnimationStart
MS前綴：MSAnimationStart (IE10+)
比如

Object.prototype.perfixOn = function (eventName, cb) {
    var perfix = ["webkit", "MS", ""]
    for (var i = perfix.length - 1; i >= 0; i--) {
        if (perfix[i] != "") {
            eventName.replace(/^(w)/, function ($1) {
                return $1.toUpperCase()
            })
        }
        this.addEventListener(perfix[i] + eventName, cb, false);
    }
}
Obj.perfixOn("animationend", cb)

講的很粗糙，有不正確的地方請多指教

云服務器 GPU云服務器瀏覽器對和css3的支持簡單的javascript css3動畫高性能css3動畫

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/79321.html

可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一?？赡苁莿?chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數(shù)量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
前端動畫調研-V1

摘要：支持動畫狀態(tài)的，在動畫開始，執(zhí)行中，結束時提供回調函數(shù)支持動畫可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現(xiàn)的能更方便的實現(xiàn)幀動畫，替代復雜的定義方式。動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

ddongjian0000 2019-08-23 11:00 評論0 收藏0
大話 JavaScript 動畫

摘要：直到年，世界上第一部動畫片滑稽臉的幽默相問世。上一次視神經(jīng)傳遞的圖像將會在大腦中存留，直到下一次神經(jīng)信號到達。移動設備還是相當慘烈，并沒有開始支持。市面上有很多動畫庫，大家可以開箱即用。有一些是針對操作的，也有一些是針對對象。背景 138.2億年前，世界上沒有時間和空間，或許世界都不存在，在一個似有似無的點上，匯集了所有的物質，它孕育著無限的能量與可能性。宇宙大爆炸巨大的內力已無...

syoya 2019-08-23 12:14 評論0 收藏0
CSS3的過渡和動畫

摘要：轉化的轉化分為以下幾種移動旋轉縮放傾斜混合每種轉化都還有對應的版本注意閉合的內聯(lián)元素不支持轉化，過渡和動畫如等。過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關內容并記錄下。在開始之前，首先看看CSS3的轉化。轉化 CSS3的轉化分為以下幾種： translate 移動 rotate　旋轉 scale　縮放 skew　傾斜 matrix　混合每種轉化都還有對應的3d版...

andong777 2019-08-30 13:53 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0