如何编写JS事件和CSS过渡时间？

Question

示例

1. Javascript函数向HTML元素添加了一些CSS类。
2. 因此，HTML元素开始使用以下方式对其样式进行动画处理（隐藏） transition。
3. 隐藏之后，我们要执行另一个JS函数以添加另一个 将CSS类添加到另一个元素并使其可见。

问题在于函数是JS代码，而动画是CSS。

如何对JS和CSS代码使用相同的时间值？我想遵循DRY，只获得单一事实来源。

有可能吗？

Answer 1

transitionend

的魔力

您要寻找的是在添加event listener transitionend类之后使用.classList.add

element.classList.add('yourTransitionAnimationClass')
element.addEventListener('transitionend', callbackFunction)

Answer 2

用于定时CSS转换和javascript事件监听器的jquery解决方案。

.class_one {

  transition:1s

}
.class_two {

  transition:1s;
  transition-delay:1s;
}

//jquery function
 $('button').click(function(){
   $(this).addClass('class-one class-two');
 });

使用转换延迟，您可以安排转换连续进行的时间。