javascript - 当动画结束(css)时，我该如何做到这一点，一个新文件打开或页面打开

Question

我想知道是否可以在动画运行后加载一个函数或一个页面。例如，此代码将运行动画，然后将打开一个新文件，该文件是不同编码的网站。这将允许对网站进行一个很酷的介绍，然后是实际的网站。这也可能发生在同一个文件中。我宁愿只使用 js、html 和 css。谢谢。

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  background: #000;
}

.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.container span {
  text-transform: uppercase;
  display: block;
}

.text1 {
  color: red;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 7s 1;
}

.text2 {
  color: aqua;
  animation: hats 13s;
}

@keyframes text {
  0% {
    color: red;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  20% {
    color: yellow;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  40% {
    color: green;
  }
  50% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  60% {
    color: aqua;
  }
  80% {
    color: purple;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    color: red;
  }
}

<div class='container'>
  <span class='text1'>Welcome</span>
  <span class='text2'>Hatsonboats58</span>
</div>

Answer 1

您可以使用animationend事件监听器然后切换介绍 div 和实际 div 内容的显示:

const animationCont = document.querySelector('.container');
const mainCont = document.querySelector('.main-content');

animationCont.addEventListener('animationend', () => {
    animationCont.style.display = "none";
    mainCont.style.display = "block";
});

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  background: #000;
}
.main-content {
  z-index: 0;
  display: none;
  color : #fff;
}
.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.container span {
  text-transform: uppercase;
  display: block;
}

.text1 {
  color: red;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: text 7s 1;
}

.text2 {
  color: aqua;
  animation: hats 13s;
}

@keyframes text {
  0% {
    color: red;
    margin-bottom: -40px;
    letter-spacing: 8px;
  }
  20% {
    color: yellow;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  40% {
    color: green;
  }
  50% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  60% {
    color: aqua;
  }
  80% {
    color: purple;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    color: red;
  }
}

<div class='container'>
  <span class='text1'>Welcome</span>
  <span class='text2'>Hatsonboats58</span>
</div>
<div class='main-content'>
<p>Hello Im the real content!!</p>
</div>