倒数前后的Java动画 [英] Javascript Animation before/after countdown

问题描述

我想添加一个倒计时，当页面完全加载时淡入，当它达到0后淡出并被另一个文本替换（也淡入），我想自己做，但是，可以有人给我一些迹象吗？谢谢。

I want to add a countdown, that fades in when page is fully load, and after it hits 0 to fade out and be replaced with another text (fade in as well), I want to do it by myself but, can someone give me some indications? Thanks.

推荐答案

您可以使用 Element.animate（）为多个属性设置动画和 .onfinish 在动画结束时执行任务。

You can use Element.animate() to animate multiple properties and .onfinish to perform task when animation is finished.

let options = {
  opacity: [0, 1],
  color: ['transparent', 'green'],
  background: ['#fff', '#cb0']
};

let settings = { 
  duration: 2000,
  iterations: 1,
  fill: 'forwards'
};

const div = document.querySelector('div');

div.animate(options, settings)
.onfinish = () => {
  for (const key in options) {
    options[key].reverse();
  }
  div.animate(options, settings)
  .onfinish = () => {
    delete options.background;
    for (const key in options) {
      options[key].reverse();
    }
    div.textContent = 'done';
    div.animate(options, settings);
  }
}

body {
  height: 95vh;
}
div {
  color: transparent;
  font-size: 24px;
  text-align: center;
  display: block;
  width: 95vw;
  height: 95vh;
  background: '#fff';
}

<div>animating</div>

这篇关于倒数前后的Java动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！