Reputation: 805
I'm firing a transition with an extra class (.opened
) with jQuery.
.box {
width: 200px;
height: 200px;
background: red;
opacity: 0;
visibility: hidden;
transition: opacity 1.3s ease;
}
.box.opened {
visibility: visible;
opacity: 1;
}
The transition is smooth when the jQuery adds the .opened
class, but not when jQuery removes it.
Should I use animate()
or is it possible to get the expected result with CSS?
I think it's because of the visibility
property, but why doesn't work it backwards?
Upvotes: 2
Views: 241
Reputation: 5301
Here is an alternative without using jQuery (as in pure CSS). It uses the :target pseudo-class to toggle between an ON and an OFF state.
It also shows how to use an icon-font with menu/close button.
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#box { width: 200px; }
#box a { width: 100%; position: relative; text-decoration: none }
.menu__content { width: 100%; height: 200px; padding: 8px; opacity: 0;
background: rgba(255,0,0,.3); transition: opacity 0.5s ease }
#box .menu__open { display: block } /* initial state */
#box:target .menu__open { display: none } /* hidden when __content visible */
#box .menu__close { display: none } /* initial state, inverse of __open */
#box:target .menu__close { display: block } /* hidden when __content invisible */
#box .menu__content { opacity: 0; } /* __close state */
#box:target .menu__content { opacity: 1; position: relative; } /* __open state */
<div id="box">
<a class="menu__open material-icons" href="#box">menu</a>
<a class="menu__close material-icons" href="#" >close</a>
<div class="menu__content">Hello. This is some stuff inside a nice red box.</div>
</div>
Upvotes: 1
Reputation: 89780
The reason is because only the opacity
is being transitioned whereas the visibility
is not and so the element disappears immediately. Because of this immediate disappearance, opacity
transition is not visible. Transition the visibility
also like in below snippet.
.box {
width: 200px;
height: 200px;
background: red;
opacity: 0;
visibility: hidden;
transition: opacity 1.3s ease, visibility 1.3s ease;
}
.box.opened {
visibility: visible;
opacity: 1;
}
$(document).ready(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('.box').toggleClass('opened');
});
});
.box {
width: 200px;
height: 200px;
background: red;
opacity: 0;
visibility: hidden;
transition: opacity 1.3s ease, visibility 1.3s ease;
}
.box.opened {
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>
Note: You don't really need to change visibility
because it almost does the same thing as what is done by opacity: 0
. Hence you can do away with the visibility
property change.
$(document).ready(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('.box').toggleClass('opened');
});
});
.box {
width: 200px;
height: 200px;
background: red;
opacity: 0;
transition: opacity 1.3s ease;
}
.box.opened {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>
But retaining visibility
property change and doing away with the opacity
change will not produce the same output (like seen in the below snippet).
$(document).ready(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('.box').toggleClass('opened');
});
});
.box {
width: 200px;
height: 200px;
background: red;
visibility: hidden;
transition: visibility 1.3s ease;
}
.box.opened {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>
You can find the list of properties that can be transitioned or animated here in the specs.
Upvotes: 3