Question

我做错了什么，在按下按钮后动画没有重复？感谢您的帮助。

var  abox = document.getElementsByClassName("box")[0];
function allmove(){
       abox.classList.toggle("move");
}

.vector img {
    width: 20%;
    height: 20%;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;  
}
@-webkit-keyframes example{
    0%{left:0px; top:0px;}
    25%{left:200px; top:0px;}
    100%{left:0px; top:0px;}
}

<div class="box"></div>
<div class="vector">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
</div>
<button class="button" onclick="allmove()">Click Me</button>

Answer 1

您可以使用类似的方法刷新点击动画。

我添加了.animation类以将其与向量类分开。这样您就可以轻松切换它。

setTimeout将在删除类后再添加类。

var  abox = document.getElementsByClassName("animation")[0];
function allmove(){
    abox.classList.remove("animation");
    setTimeout(function(){ abox.classList.add('animation') }, 100);
}

    .vector img {
        width: 20%;
        height: 20%;
        position: relative;
 
    }
    .animation img {
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: 1; 
    }
    @-webkit-keyframes example{
        0%{left:0px; top:0px;}
        25%{left:200px; top:0px;}
        100%{left:0px; top:0px;}
    }

    <div class="box"></div>
    <div class="vector animation">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
    </div>
    <button class="button" onclick="allmove()">Click Me</button>

Answer 2

就是这样，但是我认为addEventListener比onclick（）更好

我修改了您的代码

您可以在此处找到jsfiddle示例

_handleSubmit = () => {
    console.log("Register.js line 69: ", this.props.email);
    const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (reg.test(this.props.email) === true) {
      Keyboard.dismiss();
      this.setState({ displaySpinner: true });
      this.props
        .submitVerificationEmail(this.props)
        .then(exists => {
          if (exists) {
            if (this.props.registeredUser.Credentials.IsPasswordSet) {
              this.setState({ displaySpinner: false });
              //eslint-disable-next-line
              this.props.navigation.navigate("RegisterEmailPassword");
            } else {
              this.props.handlePasswordReset(this.props.email).then(() => {
                this.setState({ displaySpinner: false });
                // this key means the user registration triggered the password recovery link
                LocalStorage.save("USER_RESET_PASSWORD_RESET_BY_SYSTEM", true);
                //eslint-disable-next-line
                this.props.navigation.navigate("ResetLinkConfirmationAlert", {
                  fromSystem: true
                });
              });
            }
          } else {
            this.setState({ displaySpinner: false });
            //eslint-disable-next-line
            this.props.navigation.navigate("RegisterNoEmail");
          }
        })
        .catch(error => {
          Alert.alert(
            "Error",
            error,
            [
              {
                text: "OK",
                onPress: () => this.setState({ displaySpinner: false })
              }
            ],
            { cancelable: false }
          );
        });
    } else {
      Alert.alert(
        "Invalid Email",
        "Please enter a valid email.",
        [
          {
            text: "OK",
            onPress: () => this.setState({ displaySpinner: false })
          }
        ],
        { cancelable: false }
      );
    }
  };

const bike = document.querySelector(".bike");
const button = document.querySelector(".button");

function allMove(){
       bike.classList.toggle("move");
}

button.addEventListener('click', allMove);

.vector img {
    width: 20%;
    height: 20%;
    position: relative;
    
}

.move{
  
     animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 1;  
}

@-webkit-keyframes example{
    0%{left:0px; top:0px;}
    25%{left:200px; top:0px;}
    100%{left:0px; top:0px;}
}

Answer 3

受到 Mehdi Ayari 回答的启发，但我认为使用 requestAnimationFrame 比使用超时更好。

var abox = document.querySelector(".animation");
function allmove() {
  requestAnimationFrame(() => {
    abox.classList.remove("animation");
    requestAnimationFrame(() => abox.classList.add("animation"));
  });
}

.vector img {
        width: 20%;
        height: 20%;
        position: relative;
 
    }
    .animation img {
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: 1; 
    }
    @-webkit-keyframes example{
        0%{left:0px; top:0px;}
        25%{left:200px; top:0px;}
        100%{left:0px; top:0px;}
    }

 <div class="box"></div>
    <div class="vector animation">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqYooppFTzO8AydhbeZtjnrWpeZS5b7Gbi9EnwEPuuPW_t6ycn" />
    </div>
    <button class="button" onclick="allmove()">Click Me</button>

按下按钮后，动画不再重复

3 个答案: