亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Javascript 對 CSS3 animation 動(dòng)畫的流程的簡單控制

zhigoo / 956人閱讀

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

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

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

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

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

誒，萬能的JS還真有

CSS動(dòng)畫事件 animationstart，animationend和animationiteration

看著三個(gè)事件名字就知道，這三個(gè)事件分別對應(yīng)動(dòng)畫開始前，動(dòng)畫結(jié)束后，動(dòng)畫進(jìn)行中，不廢話了，直接上個(gè)demo

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

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

on(".m1", "animationend", function() {
  // this.classList獲取的是一個(gè)DOMtokenList并不是真的數(shù)組所以要轉(zhuǎn)換一下
  var classlist = Array.prototype.slice.apply(this.classList);
  // 因?yàn)橛袃蓚€(gè)動(dòng)畫，所以要判定是哪一個(gè)動(dòng)畫結(jié)束了來執(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);
}

這么一看其實(shí)也是很簡單的哈哈,順帶一提起時(shí)transition過渡動(dòng)畫也有個(gè)事件transitionend。

最后，兼容性

CSS3動(dòng)畫相關(guān)屬性的兼容性可以看這里

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)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79321.html

相關(guān)文章

  • 可能是最全的前端動(dòng)效庫匯總

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

    afishhhhh 評論0 收藏0

  • 前端動(dòng)畫調(diào)研-V1

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

    ddongjian0000 評論0 收藏0

  • 大話 JavaScript 動(dòng)畫

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

    syoya 評論0 收藏0

  • CSS3的過渡和動(dòng)畫

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

    andong777 評論0 收藏0

  • css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）屬性

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

    waruqi 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<