应用类之前更改的 CSS 类不生效答案

【问题标题】：Changed CSS class before applying class does not take effect应用类之前更改的 CSS 类不生效
【发布时间】：2017-10-23 09:24:54
【问题描述】：

在这有一段时间了，想知道是否有人可以指点一下：

本质上，我试图在将 css 动画的类应用于要动画的元素之前更新它，但类中的更新元素将不适用。在示例中，迭代计数、持续时间和延迟在我尝试动画时不适用，但如果我已经在课堂上使用它们，它们就可以正常工作（它们现在被注释掉了）。

在应用动画之前有什么想法或其他方法来更新动画吗？我是否必须为我的动画的每个变体创建单独的类？"

谢谢。

$(document).ready(function(){
  $(".blsAnimation").css("animation-iteration-count:", "1, 2, 1, 1");
  $(".blsAnimation").css("animation-duration", "1s, 2s, 2s, 1s");
  $(".blsAnimation").css("animation-delay", "1s, 1s, 6s, 7s");
  $('#bls').addClass('blsAnimation');
});

/*circle for bls*/
.circle {
  height: 10vw;
  width: 10vw;
  background: black;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 40vh;
}

.blsAnimation {
  animation-name: moveCenterLeft, moveLeftRight, moveLeftCenter, fadeOut;
  /*animation-duration: 1000ms, 2000ms, 1000ms, 1000ms;*/
  /*animation-delay: 1000ms, 2000ms, 6000ms,7000ms;*/
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  /*animation-iteration-count: 1, 2, 1, 1;*/
  animation-direction: normal, alternate, normal, normal;
  animation-fill-mode: none, none, none, forwards;
}


/*animations for moving back and forth*/
@keyframes moveCenterLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40vw);
  }
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(40vw);
  }
}

@keyframes moveLeftCenter {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- If IE use the latest rendering engine -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="UTF-8">
    <title>Coach Rory</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" href="styles.css">
    <script type='text/javascript' src="script.js"></script>
    <script type ='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.2.0/screenfull.min.js"></script>


</head>
<body>
  <div>

  <div class="circle" id = "bls"></div>

  </div>
</body>
</html>

【问题讨论】：

您是否尝试过使用单个动画而不是一组动画？也许 jquery 的动画集有问题，因为它可以一次处理一个，不像你正在使用的 css 速记
@mnemosdev 我没有尝试过使用单个 css 动画，但我想要的应用程序必须有一系列动画，因为左右移动的次数必须迭代可变次数。有没有办法在能够控制左右迭代的同时重做动画，圆在中间开始和结束？
您的班级名称 $("#blsAnimation") 以 # 开头。不确定是否允许。 addClass 函数将假定名称以点开头。
@Gerard 不错！我一定是在重写它时改变了它。但问题仍然存在：/
@mnemosdev 刚刚尝试将其作为数组输入，没有变化。感谢您的建议

标签： jquery html css animation

【解决方案1】：

尝试用这个来改变你的 jquery 代码。

$(document).ready(function(){
    $('#bls').addClass('blsAnimation');
    $(".blsAnimation").css({"animation-iteration-count": "1, 2, 1, 1","animation-duration": "1s, 2s, 2s, 1s","animation-delay": "1s, 1s, sideToSideDelay, fadeOutDelay"});
});

【讨论】：

是的！有用！这正是我一直在寻找的。谢谢！

【解决方案2】：

这个怎么样？

$(document).ready(function() {
  
  //Manipulate animations here!
  var animations = [{
      'animation-iteration-count': 1,
      'animation-duration': '3s',
      'animation-name': 'moveCenterLeft',
      'animation-direction': 'normal',
    },
    {
      'animation-iteration-count': 2,
      'animation-duration': '2s',
      'animation-name': 'moveLeftRight',
      'animation-direction': 'alternate',
    },
    {
      'animation-iteration-count': 1,
      'animation-duration': '1s',
      'animation-name': 'moveLeftCenter',
      'animation-direction': 'normal',
    },
    {
      'animation-iteration-count': 1,
      'animation-duration': '1s',
      'animation-name': 'fadeOut',
      'animation-direction': 'normal',
    }
  ]

  function handleAnim(anim) {
    var current = anim[0];
    if (current) {
      $('#bls').css(current).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function(e) {
          anim.shift();
          handleAnim(anim);
        });
    }
  };

  handleAnim(animations);

});

/*circle for bls*/

.circle {
  height: 10vw;
  width: 10vw;
  background: black;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 40vh;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out
}


/*animations for moving back and forth*/

@keyframes moveCenterLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-40vw);
  }
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(40vw);
  }
}

@keyframes moveLeftCenter {
  0% {
    transform: translateX(-40vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.2.0/screenfull.min.js"></script>

<div class="circle" id="bls"></div>

【讨论】：

【解决方案3】：

当您使用带有 blsAnimation 类的 jquery 选择器时，您可能会认为您指的是 CSS 类。但是 $(.class) 选择器选择具有“.class”属性的 DOM 元素。由于您在“#bls”元素的开头没有此类，因此未选择它。因此，它不适用于 DOM 元素（在这种情况下，DOM 元素是 id 为 'bls' 的标签）。

您的订单应该是

$('#bls').addClass(blsAnimation);
//then change CSS here by referencing $('.blsAnimation')

通过这种方式，当您更改 css 时，它可以选择具有 'bls' id 的元素

【讨论】：

感谢您的解释！我没有意识到它是这样工作的。