CODEWITHSUNDEEP
javascriptjquerycss
snow
snow

Reputation: 475

on click animation implemented with addClass inside a setTimeOut occurs only oinceWhat

What i have is some html at the top of the page like this:

<div class="candidate-details">
  <p class="name">Lorem Ipsum</p>
  <p class="occupation">Lorem Ipsum Developer</p>
  <p class="email"><i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</p>
  <div class="social-media">
    <a class="social-icon" href="https://github.com/" target="_blank"><i id="gitid" class="fa fa-github fa-lg" aria-hidden="true"></i></a>

    <a class="social-icon" href="https://www.linkedin.com/" target="_blank"><i id="linkedid" class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>

  </div>
</div>

At the bottom of the page, i have a link :

<p id="thank-you" class="about-contents">Thanks for stopping by. <a class="touch" href="#">Get in touch :) </a>

JS code:

  $(".touch").on("click", function(){
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $("html, body").animate({
          scrollTop: 0
        }, 1000);

  setTimeout(function() {
    $(".fa-envelope, .fa-github, .fa-linkedin").addClass("swing").one(animationEnd, function() {
      $(this).removeClass("swing");
    });
   }, 1500);
  });

and finally some CSS:

 .swing {
  -moz-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -o-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -webkit-transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  transition: all 600ms cubic-bezier(0.99, 0, 0.57, 0.94);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

Full code: Codepen

So do i want to achieve?

What i want is when the user clicks on the link Get in touch at the bottom of the page,some smooth scrolling business ensues, the user is taken to the top of the page and the three fontawesome icons rotate 360 deg getting their attention. I want this to happen with every click.

What's currently happening?

the smooth scroll happens successfully everytime. The rotation animation occurs successfully on the first click but that's it. It doesn't repeat on every subsequent click.

There are numerous questions on SO on CSS animation working only once but none of them have seemed to help me. This one has come close but didn't really solve anything.

What do i want to happen? The rotation animation in addition to the smooth scroll to repeat everytime the user clicks on the Get in touch link.

Thank you.

Upvotes: 0

Views: 51

Answers (1)

sean
sean

Reputation: 1210

It is because you are using animation instead of transition. Change this:

  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

to

var animationEnd = 'webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd transitionend';

Upvotes: 1

Related Questions