Блог

Главная - Вопросы по программированию - Как реагировать на сброс GIF при обновлении проекта?

Как реагировать на сброс GIF при обновлении проекта?

#javascript #css #reactjs #animated-gif

Вопрос:

Дано :

 function App() {

    return (
            <div className="container"> 
              <span>
           
              </span>
            </div>
       );
   }

   
ReactDOM.render(<App />, document.querySelector("#app")); 
 .container {
background-color: black;
width: 100vw;
height:100px;
display: flex;
position: relative;
}

.container::before {
background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:35px;
bottom:-10px;
position:absolute;
z-index: 999 !important;
}

.container::after {
 background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:80px;
bottom:-15px;
position:absolute;
rotate: -10deg;
z-index: 999 !important;
}

.container > span:before {
content: '';
background-color: rgb(231, 231, 231);
width: 75px;
height:40px;

right:80px;
bottom:-55px;
rotate: -7deg;

border: 3px solid rgb(126, 126, 126);
border-radius: 10px 10px 10px 10px;
position:absolute;
z-index: 999 !important;

/* transform: rotate(1deg) translate(279px, 28px);
animation: T-animation 3s linear infinite alternate-reverse; */
animation: animationFrames linear 6.25s;
animation-iteration-count: infinite;
transform-origin: 100% 0%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames linear 6.25s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 100% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16 , Safari 4 */  
}

  
@keyframes animationFrames{
0% {
  transform:  translate(35px,-2px)  rotate(-3deg) ;
}
20% {
  transform:  translate(-14px,-8px)  rotate(-3deg) ;
}
29% {
  transform:  translate(-14px,-8px)  rotate(-3deg) ;
}
51% {
  transform:  translate(35px,-2px)  rotate(-3deg) ;
}
72% {
  transform:  translate(65px,-1px)  rotate(7deg) ;
}
79% {
  transform:  translate(65px,-1px)  rotate(7deg) ;
}
100% {
  transform:  translate(35px,-2px)  rotate(-3deg) ;
 }
}
  
@-webkit-keyframes animationFrames {
0% {
  -webkit-transform:  translate(35px,-2px)  rotate(-3deg) ;
}
20% {
  -webkit-transform:  translate(-14px,-8px)  rotate(-3deg) ;
}
29% {
  -webkit-transform:  translate(-14px,-8px)  rotate(-3deg) ;
}
51% {
  -webkit-transform:  translate(35px,-2px)  rotate(-3deg) ;
}
72% {
  -webkit-transform:  translate(65px,-1px)  rotate(7deg) ;
}
79% {
  -webkit-transform:  translate(65px,-1px)  rotate(7deg) ;
}
100% {
  -webkit-transform:  translate(35px,-2px)  rotate(-3deg) ;
 }
}
  

    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="app"></div>

с помощью ссылки JSFiddle здесь,

Я хочу найти способ запускать фоновые GIF-файлы и анимацию одновременно при обновлении или что-то подобное. В настоящее время, если вы нажмете run code snippet , они, вероятно, будут синхронизированы, но если страница будет обновлена, GIF-файлы будут воспроизводиться в фоновом режиме во время перезагрузки анимации.

Например, если run code snippet щелкнуть несколько раз, gif просто продолжает воспроизводиться непрерывно, пока анимация перезапускается.

It is tedious for me to design this animation if every time I restart my program the gif and the animation are unsynchronized.

Things I have tried

I have tried changing <div className="container" /> to <div /> , refresh, then change back, but that doesn’t seem to fix it. I have also tried to change my App.js to

  const [loaded,setState] = React.useState("container");

const reloadGif = () => {
    React.setState({loaded: ''})
    setTimeout(() => {
      React.setState({loaded: "container"})
    }, 0)
  }

return (
   <div className={loaded}> 
   <button onClick={reloadGif}>Reset</button>
     <span>
       
     </span>
   </div>
);

}

ReactDOM.render(, документ.Селектор запросов(«#приложение»));

но нажатие на replay кнопку вообще не сбрасывает gif и анимацию.

Кто-нибудь знает, как я могу решить эту проблему ?

Метки: