JavaScriptアニメーションが読み込まれる前に1秒間画像が表示されます

Question

gatsby.jsでウェブサイトを作成しました。私はbounce.jsでいくつかの画像をアニメートします。これはDOMをアニメーション化するjavascriptライブラリです。

私のローカルコンピュータではすべてがうまく見えますが、ライブサーバーに展開すると、次のような問題が発生します。画像はページの読み込み時にフェードインするはずです。私がウェブサイトを読み込むと、1秒間に終わると思われる位置の画像を見ることができます。そして、望みどおりに消えてフェードインします。

画像が1秒間そこに表示される理由は何でしょうか？どのように私はこれを避けることができますか、それを回避する？

編集：ここ

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が適用され、アニメーションが再生されるよりも、画像が表示されることです。 解決策の1つは次のとおりです。 画像に表示を追加しないインライン+ CSSファイルに追加表示：インラインブロック。