CSS3动画链接的作品很奇怪

时间:2018-09-20 07:16:11

标签: javascript css3

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

为了实现它,我使用带有关键帧的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>

如您所知,我将所有intro链接到结果游戏。

在介绍2淡出之前,效果很好。

但是intro2intro3intro4的淡出功能无效。

enter image description here

有什么解决办法吗?

谢谢。

1 个答案:

答案 0 :(得分:3)

在intro2 intro3和intro 4上,它们设置为display:none时不起作用 如果其中包含类淡入淡出,则将有display:inline-block。并随着班级淡出而再次拥有display: none。因此动画会发生,但您不会看到它。

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

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

编辑:我还为课程淡出添加了text-align: center;position: absolute;