Highlighted

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

Participant ,
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; } }

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)

});

Views

480

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

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

Participant ,
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; } }

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)

});

Views

481

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
Aug 12, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
Aug 12, 2019 1
Participant ,
Aug 12, 2019

Copy link to clipboard

Copied

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
Reply
Loading...
Aug 12, 2019 0