当一个过渡——比方说——以60%的价格完成时,有没有办法做点什么?一个API作为转换端监听器很容易,但只适用于任何数量的转换进程。
伪代码:
node.addEventListener('transitionat', () => alert('foo'), {progress: 60})
当转换持续时间设置为1s时,应用程序将执行
alert('foo')
600毫秒后。
目前实现这一目标的最佳解决方案是什么?
注意:使用setTimeout不是一个选项
目前
我的
最好的解决方案/技巧是只使用“未使用”的转换属性:
let callBackStamp = 0;
let transitionStamp = 0;
mainz.addEventListener('transitionend', event => {
if (event.propertyName !== 'transform') {
callBackStamp = Date.now();
console.log('simulate callback at ', callBackStamp);
} else {
transitionStamp = Date.now();
console.log('finished with delay ', transitionStamp - callBackStamp);
}
})
body {
font-family: Arial, Helvetica, sans-serif;
}
div.something {
background-color: rgba(255, 255, 255, 0.9);
transition-property: transform, background-color;
transition-duration: 1s, 600ms;
transition-delay: 200ms;
}
div.something:hover {
background-color: rgba(255, 255, 255, 1.0);
transform: translate(10px, 5px);
z-index: 2;
}
div.square {
width: 100px;
height: 100px;
border: solid;
padding: 5px;
}
<div id="mainz" class="square something">Hover plz</div>
但这当然是非常肮脏的,而且很难找到一个可用于转换的属性,可以操纵它以触发转换,但用户无法识别,UI也不需要有效地使用它(如果确实需要,则不能仅使用背景色)
有
背景色(已配置/维护)。
