Javascript 对 CSS3 animation 动画的流程的简单控制

zhigoo 发布于2019-08-19 18:12 / 863人阅读

摘要：的是一个好东西，能让页面动画更加纯净流畅，但是之前一扯到动画流程的控制比如执行完第一个动画后再执行第二个动画在执行某个动作就有点懵逼如果是动画呢，有回调函数或者，方便滴狠呐但是呢。。

CSS3的animation是一个好东西，能让页面动画更加纯净流畅，但是之前一扯到动画流程的控制（比如执行完第一个动画后再执行第二个动画在执行某个动作）就有点懵逼

如果是jQuery动画呢，有回调函数（或者.promise().done()），方便滴狠呐！但是animation 呢。。呢。。。呢。。。。呢。。。。。呢。。。。。。

粗粗的想一想吧，貌似给元素加上第一个动画的类后根据第一个动画的执行时间来设置个延迟再加入第二个动画的类也是可以实现的，但是总觉得这样不干净，而且setTimeout其实也不是那么的可控，

然后塔哒，就遇到这篇文章你若触发，我就处理，讲的是JS事件响应的，对， 事！件！响！应！。如果动画结束时能有能触发某个事件，JS再监听响应一下，这不就完事儿了吗？

诶，万能的JS还真有

CSS动画事件 animationstart，animationend和animationiteration

看着三个事件名字就知道，这三个事件分别对应动画开始前，动画结束后，动画进行中，不废话了，直接上个demo

实现了个简单的删除动画，第一步让元素出视野，第二步让元素height和margin,paddind等都塌陷，最后直接移除元素

有两个自己觉得要注意的地方写下注释

on(".m1", "animationend", function() {
  // this.classList获取的是一个DOMtokenList并不是真的数组所以要转换一下
  var classlist = Array.prototype.slice.apply(this.classList);
  // 因为有两个动画，所以要判定是哪一个动画结束了来执行下一阶段
  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动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79321.html

可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
大话 JavaScript 动画

摘要：直到年，世界上第一部动画片滑稽脸的幽默相问世。上一次视神经传递的图像将会在大脑中存留，直到下一次神经信号到达。移动设备还是相当惨烈，并没有开始支持。市面上有很多动画库，大家可以开箱即用。有一些是针对操作的，也有一些是针对对象。背景 138.2亿年前，世界上没有时间和空间，或许世界都不存在，在一个似有似无的点上，汇集了所有的物质，它孕育着无限的能量与可能性。宇宙大爆炸巨大的内力已无...

syoya 2019-08-23 12:14 评论0 收藏0
CSS3的过渡和动画

摘要：转化的转化分为以下几种移动旋转缩放倾斜混合每种转化都还有对应的版本注意闭合的内联元素不支持转化，过渡和动画如等。过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。转化 CSS3的转化分为以下几种： translate 移动 rotate　旋转 scale　缩放 skew　倾斜 matrix　混合每种转化都还有对应的3d版...

andong777 2019-08-30 13:53 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0