Question

我一直想玩CSS动画（因为它们只是原型，所以我并没有真正使用它们！）

我有一个包含5个按钮的简单页面。岩石，纸，剪刀，蜥蜴，斯波克。单击每个按钮时，将调用JS函数，并传递操作的名称，例如“ rock”，为我的div添加了几个类。其中之一具有动画。这部分工作正常。

我有一个测试按钮，该按钮可循环显示操作，更改类并添加“摇动”动画。

除了通过手机（Safari浏览器），我已经设法使其与浏览器兼容，在初始页面加载时，它不会运行两个动画（shake2）中的第一个动画5次（动画迭代-数：5）。事情是...随着随后的点击，它似乎可以正常运行！

通过在页面加载时将这些类添加到div中，我设法找到了解决方法，并增加了一个类，使其变为“ display：none”。唯一的问题是，如果我然后单击其中一个按钮来设置操作，则下次我按下测试按钮时，会遇到与页面加载时相同的问题。摇晃的迭代只开始一次。

我已在页面底部添加了一个“控制台”，以跟踪附加的类。我的代码非常混乱，因为我做了很多尝试，并添加了一些东西来阻止这种故障的发生。

在初始加载时向战场元素添加“ battleHide”解决了该问题，但后来的点击却使我感到困惑。

    $(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

// Declare variables
var audio = document.getElementsByTagName("audio")[0];
var rpslsList = ["rock", "paper", "scissors", "lizard", "spock"];
var lastElement = rpslsList[rpslsList.length - 1];
var element = document.getElementById("battlefield");

// playBattleAnimation Function (Cycles through attacks)
function playBattleAnimation() {
  logClasses("before");

  if (element.classList.contains("battlefield")) {
    element.classList.remove("battlefield");
  }

  if (element.classList.contains("elementToFadeIn")) {
    element.classList.remove("elementToFadeIn");
  }

  if (element.classList.contains("battleHide")) {
    element.classList.remove("battleHide");
  } else {
    element.classList.add("battleHide");
    void element.offsetWidth;
    logClasses("none");
    alert(element.classList);
    element.classList.remove("battleHide");
  }

  void element.offsetWidth;
  element.classList.add("battlefield");
  loopThroughAttacks(rpslsList);

  // LOOK AT ADDING BATTLEHIDE AFTER ITEM SELECTED? Only issue is this will hide it...
  window.setTimeout(function(){logClasses("after");}, 2500);
}

// Function to log classes attached to Battlefield during each state
function logClasses(state) {
  var classString = element.classList;
  classString = classString
    .toString()
    .split(" ")
    .join(", ");

  if (classString === "") {
    classString = "No Classes";
  }

  document.getElementById("test").innerHTML +=
    (state === "before" ? "<hr />" : "") +
    (state != "none"
      ? state.charAt(0).toUpperCase() + state.slice(1) + ": ["
      : " [") +
    classString +
    "] - " +
    element.classList.length +
    " Classes" +
    (state === "after" ? "<hr /><br />" : "<br />");
}

// setBattlefield Function - Sets main area to specific icon
function setBattlefield(action) {
  // declare the variables we want to use
  var name, arr;

  // Call our log class to set an entry before processing
  logClasses("before");

  // Reset & play our sound effect
  audio.currentTime = 0;
  audio.play();

  // If no action has been passed in, set the class to be added to empty
  if (action === undefined) {
    name = "";
  } else {
    name = "far fa-hand-" + action;
  }

  // Clear all classes from element
  element.className = "";

  // Reset the animation process
  void element.offsetWidth;

  // Add the new class containing our animation
  element.classList.add("elementToFadeIn");

  //alert(element.classList);

  // Split className on spaces
  arr = element.className.split(" ");

  // If class isn't in our new split array, add it.
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }

  // Write log record for classes "after"
  window.setTimeout(function(){logClasses("after");}, 1000);
}

// Function to loop through our attacks array
function loopThroughAttacks(rpslsList) {
  for (var i = 0; i < rpslsList.length; i++) {
    (function(i) {
      setTimeout(function() {
        document.getElementById("test").innerHTML +=
          "<i class='far fa-hand-" + rpslsList[i] + "'></i> ";
        element = document.getElementById("battlefield");

        audio.currentTime = 0;
        audio.play();

        if (i > 0) {
          name = "fa-hand-" + rpslsList[i - 1];
          element.classList.remove("far", name);
        } else if (element.classList.contains("far")) {
          rpslsList.forEach(function(entry) {
            //console.log(entry);
            if (element.classList.contains("fa-hand-" + entry)) {
              element.classList.remove("far", "fa-hand-" + entry);
            }
          });
        }

        void element.offsetWidth;
        name = "far fa-hand-" + rpslsList[i];
        arr = element.className.split(" ");

        if (arr.indexOf(name) == -1) {
          element.className += " " + name;
        }

        logClasses("none");
      }, 500 * i);
    })(i);
  }
}

有很多代码，所以我只包含了js并为CSS提供了代码笔，等等： https://codepen.io/IDemixI/pen/jdVaBM

我很乐意像在我尝试过的所有其他浏览器中一样完成第一个动画的5次迭代。

Safari（iPhone）中的动画问题-首次单击时，动画仅触发一次

0 个答案: