자바 스크립트 애니메이션이로드되기 전에 이미지가 1 초 동안 표시됩니다.

Question

gatsby.js로 웹 사이트를 만들었습니다. bounce.js를 사용하여 일부 이미지를 애니메이션화합니다. bounce.js는 DOM에 애니메이션을 적용하는 javascript 라이브러리입니다.

내 로컬 컴퓨터에서 모든 것이 잘 보이지만 라이브 서버에 배포 할 때 다음과 같은 문제가 있습니다. 이미지가 페이지로드시 페이드 인한다고 가정합니다. 웹 사이트를로드하면 잠시 후에 끝내야하는 위치의 이미지를 볼 수 있습니다. 그런 다음 이미지를 사라지게하고 사라지게 할 수 있습니다.

이미지가 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>  
    ); 
    } 

} 

내가 사용하는 SCS :

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

Answer 1

이유 중 하나는 HTML 및 이미지가 후보다,로드되었는지 될 수

여기

는 일부 코드입니다 CSS 파일이로드 될 때가 있습니다. 그러면 CSS가 적용되고 애니메이션이 재생되는 것보다 이미지가 표시됩니다. 하나의 해결책은 다음과 같습니다. 디스플레이에 아무 것도 추가하지 않음 인라인 + CSS 파일에 추가 표시 : 인라인 블록.