Safari/Chrome浏览器中的动画速度未更改

问题描述

我正在使用关键帧动画旋转圆.在android浏览器，chrome和Mozilla中运行正常.但是在iPhone的Safari/Chrome浏览器中，单击按钮时的动画速度不会改变.

I am using a keyframe animation to rotate the circle. It is working fine in android browsers, chrome and, Mozilla. But animation speed on click of a button is not changing in safari/chrome of iphone.

class App extends React.Component{
    state = {
      speedClass : "two"
    };

    render(){
        return(
           <div>
               <div className={"spinMe " + this.state.speedClass}>I am spinning</div>
               <button onClick={this.handleClick}>Change speed</button>
           </div>
        );
    }

    handleClick=()=>{
      this.setState({ speedClass: this.state.speedClass === "two"?"one":"two" });
    }
}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

.spinMe{
  width:100px;
  height:100px;
  border-radius:50%;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.spinMe.one {
    -moz-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
     animation: spin 1s infinite linear;
  }

.spinMe.two {
    -moz-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
     animation: spin 2s infinite linear;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
 from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
 from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

我找不到任何解决方案，请帮助我解决此问题.在iPhone中，速度不起作用.可能是什么问题?

I can not found any solution, please help me to fix this. In iPhone, speed not effecting. What can be the issue?

推荐答案

为解决此问题，我两次添加了相同的关键帧动画.在单击时，我切换了动画，它才起作用！

To fix this I have added the same keyframe animation two times. And on click, I am toggling the animation and it just worked!

这篇关于Safari/Chrome浏览器中的动画速度未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！