dom animation 设计

背景

在pc or mobile 端很多常用组件(eg. dropdown, Collapse, popup, tag, alert, dialog, tabs, .... )以及其他一些业务显示组件的时候，常常需要显示或者隐藏的时候需要加入一些过度动画。

设计原理

基本实现思路是给目标dom原生加上一些定义好的动画class.动画结束后移除对应class
这里我们就需要监听动画事件 动画开始之前-动画开始之后-动画运行结束 对应事件 animationstart、 animationend、transitionstart、transitionend

动画事件介绍

animation

事件触发	何时触发
animationstart	animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。
animationend	animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）
animationiteration	某个CSS动画完成后重新开始时触发 The animationiteration event is fired when an iteration of an animation ends. This event does not occur for animations with an animation-iteration-count of one.

各游览器事件兼容事件名字

  const animationstart = {
    animation: 'animationstart',
    WebkitAnimation: 'webkitAnimationStart',
    MozAnimation: 'mozAnimationStart',
    OAnimation: 'oAnimationStart',
    msAnimation: 'MSAnimationStart',
  }
 const animationend = {
    animation: 'animationend',
    WebkitAnimation: 'webkitAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    OAnimation: 'oAnimationEnd',
    msAnimation: 'MSAnimationEnd',
  }

transition

事件触发	何时触发
transitionstart	事件会在事件会在 CSS transition 开始的时候触发
transitionend	事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.如在transition完成前设置 display 为"none"，事件同样不会被触发。

各游览器事件兼容事件名字

const transitionstart = {
    transition: 'transitionstart',
    WebkitTransition: 'webkitTransitionStart',
    MozTransition: 'mozTransitionStart',
    OTransition: 'oTransitionStart',
    msTransition: 'MSTransitionStart',
  }

const transitionend = {
    transition: 'transitionend',
    WebkitTransition: 'webkitTransitionEnd',
    MozTransition: 'mozTransitionEnd',
    OTransition: 'oTransitionEnd',
    msTransition: 'MSTransitionEnd',
  }

监听事件例子

/*
 * 在指定的元素上监听transitionend事件, 例如#slidingMenu
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
    console.log('Transition 已完成');
}
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);

设计接口

接口需求

1. 动画目标dom
2. 动画class
3. 动画运行开始之前，开始之后、结束后的callback

const domAnimation = (el, transitionName, endMethod) => { }

参数说明：

• el： dom 原生对象
• transitionName： 类型，string | object, 为配置好动画的css class name

# if transitionName is string
const className = transitionName;
const activeClassName = `${transitionName}-active`
# if transitionName is object
const className = transitionName.name;
const activeClassName = transitionName.active

• endMethod: 类型 function | object, 动画运行过程callback

# if endMethod is function
let end = endMethod;
# if endMethod is object
start = endCallback.start; // 动画class添加到dom之前
active = endCallback.active; //动画class添加到dom之后
end = endCallback.end; // 动画运行结束class从dom移除之后