Question

已经有一段时间了，并且想知道是否有人可以给出一个指针：

基本上，我正在尝试更新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>

Answer 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"});
});

Answer 2

这个怎么样？

＆＃13;

$(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);

});

＆＃13;

/*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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 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的元素

在应用类之前更改CSS类不会生效

3 个答案: