CODEWITHSUNDEEP
jqueryhtmlcssanimation
Bhaag Marway
Bhaag Marway

Reputation: 27

Changed CSS class before applying class does not take effect

Been at this for a while and was wondering if someone could give a pointer:

Essentially, I'm trying to update a css animation's class before applying it to the element to be animated but the updated elements in the class won't apply. In the example, the iteration count, duration, and delay do not apply when I try the animation but if I have them in the class already, they work fine (they're commented out right now).

Any ideas or another method to update animations before applying them? Would I have to make separate classes for each variation of my animation?"

Thank you.

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

Upvotes: 1

Views: 107

Answers (3)

necilAlbayrak
necilAlbayrak

Reputation: 814

When you use jquery selector with class blsAnimation you might think that you are referring to CSS class. However $(.class) selector selects DOM elements that has ".class" attribute. Since you dont have this class at the beginning on '#bls' element, it is not selected. Therefore, it is not applied to DOM element(DOM element is tag with id 'bls' in this case).

Your order should be

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

by this way it can select element with 'bls' id when you change css of

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5574

What about this?

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

Upvotes: 1

ram vinoth
ram vinoth

Reputation: 512

Try changing your jquery code with this.

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

Upvotes: 2

Related Questions