How do you repeat a css animation on click with javascript ?

Participant ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

I have a scroll down button, which when I click, the page needs to scroll down and a secondary div(block) moves from the top to bottom.

It works once, but if you scroll back up to the top of the page and click again, the div(block) doesn't animate again.

Also, I would prefer if both these actions could happen at the same time.

Can someone please help me with the javascript ?

HTML

<main>

<div id="block"></div>

<header id="header">

<a href="#" class="scroll-down" address="true" onclick="ani()"></a>

     <script type="text/javascript">

     function ani(){

     document.getElementById('block').className ='easeoutAnimObj';

     }

     $(function ani() {

     $('.scroll-down').click (function() {

     $('html, body').animate({scrollTop: $('section').offset().top - 70}, 'slow');

     return false;

     });

     });

     </script>

</header>

<section>

     <div class="row"></div>

</section>

</main>

CSS

#block {

     position: absolute;

     top: -100vh;

     width: 100%;

     height: 100vh;

     background-color: #FF0004;

     z-index: 100;

     visibility: visible;

}

.easeoutAnimObj {

     position: relative;

     /* Chrome, Safari*/

     -webkit-animation-name: ease-outAnimation;

     -webkit-animation-duration: 2s;

     -webkit-animation-timing-function: ease;

     -webkit-animation-delay: 0s;

     -webkit-animation-iteration-count: 1;

     -webkit-animation-direction: down;

     -webkit-animation-play-state: running;

     /* Mozilla */

     -moz-animation-name: ease-outAnimation;

     -moz-animation-duration: 2s;

     -moz-animation-timing-function: ease;

     -moz-animation-delay: 0s;

     -moz-animation-iteration-count: 1;

     -moz-animation-direction: down;

     -moz-animation-play-state: running;

     /* Standard syntax */

     animation-name: ease-outAnimation;

     animation-duration: 2s;

     animation-timing-function: ease;

     animation-delay: 0s;

     animation-iteration-count: 1;

     animation-direction: down;

     animation-play-state: running;

}

/* Define the keyframe and changes */

/* Chrome, Safari */ @-webkit-keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

/* Firefox */ @-moz-keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

/* Standard syntax */ @keyframes ease-outAnimation { 0% { left: 0; top: -100vh; } 100% { left: 0; top: 100vh; } }

Views

1.7K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Aug 12, 2019 Aug 12, 2019

Thanks. For some reason there options never worked.

I eventually got it to work with the following:

    $target = $('#block');

    $target.removeClass('easeoutAnimObj');

    setTimeout("$target.addClass('easeoutAnimObj');",100)

});

Likes

Translate

Translate
Adobe Community Professional ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

LATEST

Thanks. For some reason there options never worked.

I eventually got it to work with the following:

    $target = $('#block');

    $target.removeClass('easeoutAnimObj');

    setTimeout("$target.addClass('easeoutAnimObj');",100)

});

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines