0

我用 gatsby.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;
}
4

1 回答 1

1

一个原因可能是加载了 HTML 和图像，而不是加载了一段时间后加载了 CSS 文件。所以发生的事情是显示图像，然后应用 CSS 并播放动画。一种解决方案可能是：将 display none 添加到图像内联 + 添加到 CSS 文件 display: inline 块。

于 2017-11-01T12:21:37.737 回答