javascript - css3 动画链接工作奇怪

Question

我制作了一些包含文字动画的网站。

为了实现它，我使用了带有关键帧的 CSS3 动画。

我还使用 Promise 来链接结果动画。

首先，看看我使用的以下源。

    const intro1 = document.getElementsByClassName('intro1')[0];
    const intro2 = document.getElementsByClassName('intro2')[0];
    const intro3 = document.getElementsByClassName('intro3')[0];
    const intro4 = document.getElementsByClassName('intro4')[0];
    const sleep = ms => new Promise(res => setTimeout(res, ms));
    
    async function intro() {
      // INTRO 1
      await sleep(2500);
      await intro1.classList.remove('fade-in');
      await intro1.classList.add('fade-out');
      
      // INTRO2
      intro2.classList.add('fade-in');
      await sleep(2000);
      await intro2.classList.add('fade-out');
      await intro2.classList.remove('fade-in');
      
      // INTRO 3
      intro3.classList.add('fade-in');
      await sleep(2500);
      await intro3.classList.add('fade-out');
      await intro3.classList.remove('fade-in');
      
      // INTRO 4
      intro4.classList.add('fade-in');
      await sleep(2500);
      await intro4.classList.add('fade-out');
      await intro4.classList.remove('fade-in');
    }
    
    intro();

    body {
      margin: 0;
      padding: 0;
    }
    
    section {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
      width: 100%;
      height: 100%;
      font-size: 2rem;
      font-weight: 100;
    }
    
    span {
      text-align: center;
      position: absolute;
    }
    .intro2, .intro3, .intro4 {
      display: none;
    }
    .intro2, .intro3, .intro4 {
      text-align: center;
    }
    /* Intro animation */
    .fade-in {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      animation: fadeIn 4s forwards;
    }
    .fade-out {
      animation: fadeOut 1s forwards;
    }
    
    @keyframes fadeIn {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }
    @keyframes fadeOut {
      to {
        opacity: 0;
      }
    }

      <main>
        <section>
          
          <span class="intro1 fade-in">TEST TEST TEST TEST TEST</span>
          
          <div class="intro2">
            <p>INTRO2</p>
          </div>
          
          <div class="intro3">
            <p>INTRO3</p>
          </div>
          
          <div class="intro4">
            <p>INTRO4 TITLE</p>
            <p>INTRO5 SUBJECT ABCDEFghI</p>
          </div>
    
        </section>
      </main>

如您所知，我将所有介绍链接到后果游戏。

在 intro2 淡出之前，工作正常。

但是intro2, intro3, intro4的fade-out没有作用。

有什么解决办法吗？

谢谢。

Answer 1

在 intro2 intro3 和 intro 4 它不工作，因为它们被设置为 display:none如果它有淡入淡出的类，它将有 display:inline-block。随着类淡出，它将再次显示 display: none。所以动画会发生，但你不会看到它。

解决此问题的方法是将 display:inline-block 添加到类淡出并稍后删除该类。

修复:http://jsfiddle.net/4t3exLya/20/

编辑:我还在淡出类中添加了 text-align: center; 和 position: absolute;。