My problem is this:
I want to have a menu fade in and out of visibility when a user hovers over its parent container. I also want to do the animation with css only. Here's the code as it stands:
HTML
<div class="color-dropdown">
<div class="title">
<h4>Red</h4>
</div>
<div class="options">
<ul class="colors">
<li>Red</li>
<li>Blue</li>
</ul>
</div>
</div>
SCSS
.color-dropdown {
height: 60px;
overflow: hidden;
.options {
opacity: 0;
/*
The problem - This css transition never
gets seen on mouseout, most likely because
overflow is immediately hidden.
*/
transition: opacity 0.2s linear;
}
&.expanded {
overflow: visible;
.options {
opacity: 1;
}
}
}
Coffeescript
colorDropdown = $('.color-dropdown')
title = $('.title h4')
colors = $('.colors li')
colorDropdown.hover ->
# Fade in the options
colorDropdown.addClass 'expanded'
, ->
# Fade out - Broken!
colorDropdown.removeClass 'expanded'
colors.click ->
# Fade out - Broken!
colorDropdown.removeClass 'expanded'
# Change the current color
title.text $(this).text()
# CSS bounce animation (using animate.css here)
title.addClass 'animated bounce'
setTimeout ->
title.removeClass 'animated bounce'
, 1000
I've made a jsfiddle here so that you can easily see the problem.
Thanks in advance!
The problem is your overflow: hidden <-> overflow: visible change ... when you remove .expanded you will not see the transition on the child if the overflow on the parent jumps back to hidden.
You can fix this with using a transition on visibility of the child (.options) element.
Something like this (with transition-delay set to 0s) perhaps:
.color-dropdown {
height: 60px;
overflow: visible;
.options {
opacity: 0;
visibility:hidden;
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}
&.expanded .options {
opacity: 1;
visibility:visible;
transition-delay: 0s;
}
}
DEMO
More on this can be found here: http://www.greywyvern.com/?post=337
Related
This question already has an answer here:
How to show CSS transitions only on hover?
(1 answer)
Closed 1 year ago.
So, I have a hover transition that I would like to ease in on hover, but be instantaneous off hover.
Here's a sample snippet:
.invisible{
opacity: 0;
transition: 1s;
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
What can I change in the CSS to keep the text fading in over the space of 1 second, but instantly vanish when the mouse is moved away?
You can give transition to hover state only, by default it was given to all states.
Once you'll use it for :hover, transition will occur only for mouseover, not for mouseout.
.invisible {
opacity: 0;
}
div {
cursor: pointer;
}
div:hover .invisible {
opacity: 100%;
transition: 1s; /* moved this */
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
You just need to specify a different transition-duration for the two states, resp. specify the duration not equal zero just for the hover state.
(transition: 0s; for the normal state - because you want it to be 0, when you return into this state, from the hover state. Can be implicit, if no transition-duration is already set for that state.)
.invisible{
opacity: 0;
/* transition: 0s; */
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
transition: 1s;
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
I am trying to create a transition on a full screen overlay that is full width and full height with nonactive styles of visibility: hidden and opacity: 0. When clicking on a hamburger icon, an .active class is added to the div and it has the following styles: visibility: visible and opacity: 1.
Here is the CSS:
.overlay {
position: fixed;
left: 0;
right: 0;
height: 100%;
width: 100%;
background: '#272727';
z-index: 100;
transition: visibility 500ms ease, opacity 500ms ease;
visibility: hidden;
opacity: 0;
&.active {
visibility: visible;
opacity: 1;
}
}
The transition is occurring as expected on Chrome and Safari but the "fade-in" part of the transition fails on Firefox. It's basically skipping from the first frame to the last frame without transitioning. Here is a link to the page if you want to see it in action: link to webpage
And a video of what is occurring if you are unable to replicate the issue on your browser screen recording:
Why is this transition not working on Firefox?
I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.
This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.
var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {
element.classList.toggle("active");
});
.element{
opacity: 0;
visibility: hidden;
transition: opacity 500ms ease, visibility 500ms ease;
}
.element.active{
opacity: 1;
visibility: visible;
}
<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>
After reviewing, this is what works for me:
var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {
element.classList.toggle("active");
});
.element{
opacity: 0;
visibility: hidden;
transition: opacity 500ms ease, visibility 0s ease 500ms;
}
.element.active{
opacity: 1;
visibility: visible;
transition: opacity 500ms ease, visibility 0s ease 0s;
}
<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>
Seems like visibility doesn't have transition options. So the transition works incorrect.
In .bbfIaB this part
transition: visibility 500ms ease 0s, opacity 500ms ease 0s;
Change to this
transition: opacity 500ms ease 0s;
UPDATED
The best solution in this situation will be next:
Removing visibility from transition in CSS.
Removing visibility: hidden; from .bbfIaB
Add new css class, like .hidden {visibility: hidden;}
Add a JavaScript, which will add .hidden 500ms after removing .active
Class .hidden should be added to the template by default, should be removed with activation of class .active
UPDATE 2
Working example without visibility transition at all.
var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) {
if (element.classList.contains("active")) {
setTimeout(function() {
element.style.visibility = '';
}, 500);
} else {
element.style.visibility = 'visible';
}
element.classList.toggle("active");
});
.element{
opacity: 0;
visibility: hidden;
transition: opacity 500ms ease;
}
.element.active{
opacity: 1;
}
<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>
I am trying to create a CSS and HTML drop-down spoiler with open animation.
I started from this
jsfiddle
but margin-top:-100%; doesn't work very well.
margin-top:-100%;
Any solution for smooth animated dropdown container?
You have some error in your CSS. You specified .spoiler > div for show state and only .spoiler for hide state. You should specify the same thing for both and the animation will run smoothly.
.spoilerbutton {
display:block;
margin: 5px 0;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler > div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
padding:5px;
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
By the way You can also animate the max-height instead of margin like this :
.spoilerbutton {
display: block;
margin: 5px 0;
}
.spoiler {
overflow: hidden;
background: #f5f5f5;
}
.spoiler>div {
margin: 5px;
overflow: hidden;
transition: all 1s ease;
}
.spoilerbutton[value="Show"]+.spoiler>div {
max-height: 0;
}
.spoilerbutton[value="Hide"]+.spoiler>div {
max-height: 90px; /*use a big value here*/
}
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler">
<div>
PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE
</div>
</div>
For smooth animated dropdown container, maybe you can try this :
.spoiler > div {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: margin 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: margin 0.2s ease-in-out;
}
I hope his help you ! Am I answering your question?
I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from.
Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/
Here's the CSS code in case you see something wrong immediately:
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
}
.toggleable {
transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
I'm using a checkbox-label combination to trigger the opening and closing of the menu.
The first thing you need to understand is that the visibility property in CSS cannot be animated. This is due to it only having two states (either visible or hidden, nothing in between to facilitate the animation).
If you want to make a fade-in effect, you can use opacity:0; to opacity:1; and give that a transition instead.
The next thing to note is that your animation time is very long, and if you are animating a max-width, you need to shorten the animation time to adjust.
See fiddle : https://jsfiddle.net/m9pd8bjh/12/
And CSS:
.toggleable {
transition: max-height 0.25s ease-in-out;
}
If you specifically want that long animation timeframe, then you will have to use something other than a max-height solution.
This would then become a new avenue to approach as you would have to use JavaScript, jQuery or some other such framework.
For future reference, here is a fiddle doing the same using jQuery: https://jsfiddle.net/m9pd8bjh/15/
And here is the jQuery code:
$('.toggler').click(function(){
$('.hide').slideToggle();
});
I add another transition when you close the menu and I removed the initial margin of the ul element. Is that effect ok for you ?
CSS code changed
.hide {
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#menu-main { margin: 0; padding: 10px 40px }
input[type=checkbox]:checked ~ .toggleable {
visibility: visible;
overflow: visible;
max-height: 1000px;
transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}
See this fiddle
I cannot seem to animate ng-cloak. Essentially, I'm trying to animate a div from .containter.ng-cloak to .container.ng-binding
But it doesn't seem to workâAngular loads the div with container ng-binding classes straight away, ignoring the transition rule.
I even tried using transition-delay set to a couple seconds, no dice.
HTML
<div class="container ng-cloak" ng-controller="AppCtrl">
CSS
.container.ng-cloak,
.container.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.container.ng-binding {
opacity: 1;
}
Worth noting:
transitioning background-color from blue to red seemed to work as expected.
I omitted vendor-prefixes for the sake of brevity.
Thanks in advance.
A different approach:
http://jsfiddle.net/coma/UxcxP/2/
HTML
<section ng-app>
<div ng-class="{foo:true}"></div>
</section>
CSS
div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.foo {
opacity: 1;
}
This will work like cloak since Angular won't set the foo class until is loaded.
The cloak won't work as you want because it'll be there (as a class, attribute, element...) until Angular replace it with the result of its templating process, so it isn't the same node and that's why it won't get the transition (a transition occurs when the same element changes), is not changing, is just not the same node.
Take a look at this:
http://jsfiddle.net/coma/UxcxP/5/
As you can see in that example, the div next to the one being "angularized" is getting the fade animation because it's the same div even before Angular taking place.
I realize there's been an accepted answer; however this is doable with the ng-cloak directive as originally attempted.
I use it to animate Jade generated markup. Your Mileage May Vary with Angular runtime-templated markup.
http://codepen.io/simshanith/pen/mqCad
HTML
<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">
CSS
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.fade-ng-cloak {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
display: block !important;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
opacity: 1;
}
A pure CSS solution without adding extra-classes to the HTML:
HTML
<div ng-cloak>{{myProperty}}</div>
CSS
[ng-cloak] {
display: block !important;
opacity: 0;
}
[ng-cloak],
.ng-binding {
transition: opacity 300ms ease-in-out;
}
.ng-binding {
opacity: 1;
}
My solution is similar to some of the others, but my use case required that I use cloak on a div that angular doesn't bind to, so this is what I ended up doing...
(browser prefixes omitted for brevity)
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
display: none !important;
}
.fade-ng-cloak {
display: block !important;
opacity: 1;
transition: opacity 0.5s;
}
.fade-ng-cloak.ng-cloak {
opacity: 0;
}
HTML
<div class="row ng-cloak fade-ng-cloak">
<div class="col-xs-12">
<uib-accordion close-others="true">
...
</uib-accordion>
</div>
</div>