在載入javascript動畫之前，圖像會顯示1秒鍾

Question

我已經使用gatsby.js建立了一個網站。 我用bounce.js動畫一些圖像，bounce.js是一個使DOM動畫化的JavaScript庫。

在本地計算機上，一切看起來都不錯，但是當我將其部署到實時服務器上時，我遇到了以下問題：圖像應該在頁面加載時逐漸消失。 當我加載網站時，您可以在圖像應該停留一秒鍾的位置看到它們，然后消失並逐漸消失，就像我想要的那樣。

圖像在那里出現一秒鍾的原因可能是什么？ 我該如何避免或規避它？

編輯：

這是一些代碼：

import React from "react"
import Bounce from 'bounce.js'

// Images
import imgBoodlefight from '../img/index_boodlefight.svg'
import imgLogo from '../img/index_logo.svg'
import imgDelivery from '../img/index_delivery.svg'


// Layout
import Left from '../components/Left'
import Right from '../components/Right'
import RightTop from '../components/RightTop'
import RightBottom from '../components/RightBottom'

export default class Home extends React.Component {

  constructor(props) {
    super(props);
  }
  componentDidMount() {
    var bounceBoodlefight = new Bounce();
    var bounceDelivery = new Bounce();
    var bounceDeliveryTxt = new Bounce();
    var bounceLogo = new Bounce();

    bounceBoodlefight
      .translate({
        from: { x: 0 , y: -400 },
        to: { x: 0, y: 0 },
        duration: 1000,
        stiffness: 1,
        bounces: 0
      })
    .applyTo(document.querySelectorAll(".boodlefight-img"));

    bounceDelivery
      .translate({
        from: { x: 400 , y: 0 },
        to: { x: 0, y: 0 },
        duration: 1000,
        stiffness: 1,
        bounces: 0
      })
      // .scale({
      //   from: { x: 1.2, y: 1.2 },
      //   to: { x: 1, y: 1 },
      //   duration: 10000,
      //   bounces: 13,
      //   stiffness: 1
      // })
      .applyTo(document.querySelectorAll(".delivery-bag"));

    bounceDeliveryTxt
      .translate({
        from: { x: -500 , y: 0 },
        to: { x: 0, y: 0 },
        duration: 1000,
        stiffness: 1,
        bounces: 0
      })
      .applyTo(document.querySelectorAll(".delivery-txt"));

    bounceLogo
      .translate({
        from: { x: 0 , y:  500 },
        to: { x: 0, y: 0 },
        duration: 2000,
        stiffness: 1,
        bounces: 4
      })
      .scale({
        from: { x: 1.2, y: 1.2 },
        to: { x: 1, y: 1 },
        duration: 10000,
        bounces: 10,
        stiffness: 1
      })
      .applyTo(document.querySelectorAll(".logo-img"));
  }

  render() {
    return (
      <div className="row">
      <Left> 
      <img className="logo-img" src={imgLogo} alt="Logo" />;
      </Left>

      <Right>

        <RightTop> 
          <img className="boodlefight-img" src={imgBoodlefight} alt="Boodlefight" />;
        </RightTop>

        <RightBottom> 
          <span className="delivery-txt" style={{color: 'lavender', margin: '10px'}}>
            Order for delivery coming soon
          </span> 

          <img className="delivery-bag" src={imgDelivery} alt="Delivery" style={{margin: '10px'}} />
        </RightBottom>

      </Right>

    </div>      
    );
  }

}

這是我正在使用的scss：

.delivery-bag, .boodlefight-img, .logo-img {
  display: block;
  margin: 0 auto;
}

Answer 1

原因之一可能是HTML和圖像已加載，而不是一段時間后CSS文件已加載。 因此，發生的事情是顯示圖像，而不是CSS應用並播放動畫。 一種解決方案是：將顯示內容不添加到內聯圖像+添加到CSS文件顯示：內嵌塊。