CODEWITHSUNDEEP
javascripthtmlcsscss-animationskeyframe
Tamas Koos
Tamas Koos

Reputation: 1063

Toggle CSS keyframes

I have a popup that opens on a button click and then closes if you click on another button or outside of the popup. I want the popup to fade in on opening and fade out on closing. How can I switch between the two keyframes with javascript?

I tried to do it with switching classes with javascript, but that doesn't work.

var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
  popup.style.display = "block";
  popup.className = "opened";
  popup_content = "opened";
}
span.onclick = function() {
  popup.style.display = "none";
  popup.className = "closed";
  popup_content = "closed";
}
window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
    popup.className = "closed";
    popup_content = "closed";
  }
}
#popup {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#popup_content {
  position: relative;
  margin: auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.closed {
  -webkit-animation-name: animate-in;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-in;
  animation-duration: 0.6s;
}

.opened {
  -webkit-animation-name: animate-out;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-out;
  animation-duration: 0.6s;
}

@-webkit-keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

#close {
  float: right;
  cursor: pointer;
  margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>


<div class="closed" id="popup">
  <div class="closed" id="popup_content">
    <i class="fas fa-times-circle" id="close">Close</i> //////content
  </div>
</div>

What would be the best way to achieve my goal?

Upvotes: 2

Views: 1029

Answers (3)

James
James

Reputation: 11

Mahmoud is right about using display: none/block while trying to introduce a transition or animation. The transition is also best here vs. animations. I did not include here that using classList.add/remove will give you more flexibility in using classes later since it's not the question, but I think it's important side note. What is different here is the inclusion of the visibility attribute to the transition in your opened/closed classes. Since visibility is binary much like using display: none/block, this will remove the transition from site. For example, when closing the popup, the visibility: hidden; attribute will execute right at the beginning of the transition execution. In result, you never see the transition when closing. If you include visibility in your transition, it will execute at the proper time of your transition. I've tested this on firefox and chrome. 

var popup = document.getElementById("popup");
        var popup_content = document.getElementById("popup_content");
        var add = document.getElementById("add");
        var span = document.getElementById("close");

        add.onclick = function() {
            popup.className="opened";
            popup_content.className="opened";
        }
        span.onclick = function() {

            popup.className="closed";
            popup_content.className="closed";
        }
        window.onclick = function(event) {
            if (event.target == popup) {

            popup.className="closed";
            popup_content.className="closed";
            }
        }

#popup {
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }

        #popup_content {
            position: relative;
            margin: auto;
            background-color: white;
            width: 80%;
            max-width: 500px;
            border-radius: 5px;
            padding: 20px;
            text-decoration: none;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
        }

        .closed {
            opacity:0;
           visibility:hidden;
           transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #close {
            float: right;
            cursor: pointer;
            margin: -15px -15px 0 0;
        }

<button id="add">Open popup</button>


<div class="closed" id="popup">
    <div class="closed" id="popup_content">
        <i class="fas fa-times-circle" id="close">Close</i>
             //////content
    </div>
</div>

Upvotes: 1

Pete
Pete

Reputation: 58422

I would use a transition - see the comments in the css and js as to what I changed:

var popup = document.getElementById("popup");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
  popup.className = "opened";                // only need to transition the popup 
}
span.onclick = function() {
  popup.className = "closed";
}
window.onclick = function(event) {
  if (event.target == popup) {
    popup.className = "closed";
  }
}
#popup {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  
  /* add the following and remove the display:none */
  transition: opacity 0.6s;
  opacity: 0;                /* start off closed and opacity 0 to hide */
}
#popup.opened {
  opacity: 1;        /* add opacity 1 so it transitions to be shown */
}

#popup.closed {
  /* this stops the popup from overlaying the content when closed */
  pointer-events:none;
}

#popup_content {
  position: relative;
  margin: auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}


#close {
  float: right;
  cursor: pointer;
  margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>


<div class="closed" id="popup">
  <div id="popup_content">
    <i class="fas fa-times-circle" id="close">Close</i> //////content
  </div>
</div>

Upvotes: 1

Mahmoud
Mahmoud

Reputation: 936

To apply an animation using CSS. do not use the display none / block property or snippet. you can instead use the transition property and the opacity property for the fade in / out.

Here is an example of the code

    var popup = document.getElementById("popup");
    var popup_content = document.getElementById("popup_content");
    var add = document.getElementById("add");
    var span = document.getElementById("close");

    add.onclick = function() {
        popup.className="opened";
        popup_content.className="opened";
    }
    span.onclick = function() {

        popup.className="closed";
        popup_content.className="closed";
    }
    window.onclick = function(event) {
        if (event.target == popup) {

        popup.className="closed";
        popup_content.className="closed";
        }
    }
#popup {
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
    
        #popup_content {
            position: relative;
            margin: auto;
        	background-color: white;
            width: 80%;
            max-width: 500px;
        	border-radius: 5px;
            padding: 20px;
        	text-decoration: none;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
        }
    
        .closed {
            opacity:0;
           visibility:hidden;
           transition: opacity 0.8s ease;
        }
    
        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease;
        }
    
        #close {
            float: right;
            cursor: pointer;
            margin: -15px -15px 0 0;
        }
<button id="add">Open popup</button>


<div class="closed" id="popup">
    <div class="closed" id="popup_content">
        <i class="fas fa-times-circle" id="close">Close</i>
             //////content
    </div>
</div>

Upvotes: 1

Related Questions