Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Fading an element in from display: none; with CSS transitions.
.box {
display: block;
background: red;
width: 200px;
height: 200px;
opacity: 1;
.box-hidden {
display: none;
/* ensure box is displayed block during the transition */ {
display: block;
opacity: 0;
.box-transition {
transition: opacity 1s ease;
<div class="box">
<button class="button">Toggle Box</button>
document.addEventListener('DOMContentLoaded', function() {
var box = document.getElementsByClassName('box')[0],
button = document.getElementsByClassName('button')[0];
button.addEventListener('click', function(e) {
if (box.classList.contains('box-hidden')) {
// show
box.clientWidth; // force layout to ensure the now display: block and opacity: 0 values are taken into account when the CSS transition starts.
} else {
// hide
}, false);
box.addEventListener('transitionend', function() {
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.