背景
在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);
设计接口
接口需求
- 动画目标dom
- 动画class
- 动画运行开始之前，开始之后、结束后的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移除之后
网友评论