How to hide the div on click through animation css


Tags: javascript,html,css

Problem :

I am trying to show and hide the div based on css animation, but I need to hide the entirely once the button is clicked, and it should happen along with animation.

Currently it is animating but not hiding.

THis is what I tried.

document.getElementById('toggle').onclick = function(evt) {
  var eSib = evt.target.previousElementSibling.className;
  if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){
  	evt.target.previousElementSibling.className = 'slideUp';
  }
  else{
  	evt.target.previousElementSibling.className = 'slideDown';
  }
}
.slideDown{
    animation-name: pullDown;
    -webkit-animation-name: pullDown;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}

.slideUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.98);
    }
    100% {
        transform: scaleY(0);
    }
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.98);
    }
    100% {
        -webkit-transform: scaleY(0);
    }
}
<div class="slideDown">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>
<button id="toggle">Slide Up/Down</button>



Solution :

You can use animation-fill-mode: forwards; in your .slideUp class to persist the state of the animation after it has completed.

.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;

animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;

transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;

animation-fill-mode: forwards;
}

Here is a fiddle of it in action: https://jsfiddle.net/3m353906/

The vendor prefixes and more info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode


    CSS Howto..

    How do I prevent my dropdown from closing when clicking inside it?

    How to position background image horizontally left and vertically center?

    How to change background color of readonly textbox in css

    How to add html classes to a Django template 'for-loop' dynamically?

    How to enlarge an image horizontally in css?

    How to sharpen an image in CSS?

    css how to make the div width just for the content

    How to override background image defined in CSS with another CSS?

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    Child div's evenly spaced and flushed to side of parent: how to?

    How to make text appears alitter above using html and css

    How can I convert a CSS stylesheet to inlined CSS styles? [closed]

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How to display text over an image css [duplicate]

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How to start css animation on speciefic height of webpage

    Dropdown Menu will move all
    Below. How to prevent it?

    How to remove space after div in my td when one div uses “relative” position?

    How to locate which css include is used for an element

    How does tablesort.js create the sort indicator arrows

    How to create gradient background with CSS in Firefox < 3.6?

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    CSS: How to make this kind layout?

    How to always make page content appear beneath navigation bar?

    How can I change the colour of a line that starts with specific characters in javascript/css?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How the browser identifies the CSS framework? [closed]

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How to create such (see image below) effect using pure HTML JS and CSS?

    How can I display an alert with the position of the element that was clicked?