Transitions on the CSS display property
You can concatenate two transitions or more, and visibility
is what comes handy this time.
div { border: 1px solid #eee;}div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear;}div:hover > ul { visibility: visible; opacity: 1;}
<div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></div>
How to transition CSS display + opacity properties
I changed a bit but the result is beautiful.
.child {
width: 0px;
height: 0px;
opacity: 0;
}
.parent:hover child {
width: 150px;
height: 300px;
opacity: .9;
}
Thank you to everyone.
CSS Opacity transition with display: none
As bizarre as it may seem, the answer is to add a line to your code as follows:
window.setTimeout((function () {
text.style.display = "flex";
document.body.offsetHeight; // Yes, this line!
text.style.opacity = "1";
}), 2000);
There's nothing special about this line other than that it performs a 'read' of data within your page (any operation that reads data from the DOM would work). What this does is force the browser to layout (or reflow) the page. This is important because, in general, if you carry out a series of 'write' operations - e.g. adding an element or setting it's style, the browser will batch these up and perform them all at once. This means that when you set the element's opacity to 0, and then to 1, the browser batches up these operations and carries them out together before reflowing the page, and thus there is no animation. By inserting a write operation in between, the browser is able to animate from the state of the element where it is transparent to the state where it is fully opaque.
Making it disappear is a little different:
text = document.getElementById("text");
window.setTimeout((function () {
text.style.display = "flex"; // write operation
document.body.offsetHeight; // read operation which forces reflow
text.addEventListener('transitionend', function listener1() {
text.removeEventListener('transitionend', listener1);
text.addEventListener('transitionend', function listener2() {
text.removeEventListener('transitionend', listener2);
text.style.display = 'none'; // remove text
});
window.setTimeout(function () {
text.style.opacity = 0.1; // hide text
}, 1000);
});
text.style.opacity = 1; // write operation - show text
}), 2000);
It's best to wait for the previous transition to complete before starting a new one. It's also good practise to remove the event listeners after the event has fired. You have to wait for the transition to complete before removing the element from the DOM. There is no need to carry out a read operation before setting the style that triggers an animation because the page has already been laid out with the opacity set to 1. I have set opacity to 0.1 so that you can see that the element actually disappears.
You can see a JFiddle here.
Css transition from display none to display block, navigation with subnav
As you know the display
property cannot be animated BUT just by having it in your CSS it overrides the visibility
and opacity
transitions.
The solution...just removed the display
properties.
nav.main ul ul { position: absolute; list-style: none; opacity: 0; visibility: hidden; padding: 10px; background-color: rgba(92, 91, 87, 0.9); -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms;}nav.main ul li:hover ul { visibility: visible; opacity: 1;}
<nav class="main"> <ul> <li> <a href="">Lorem</a> <ul> <li><a href="">Ipsum</a> </li> <li><a href="">Dolor</a> </li> <li><a href="">Sit</a> </li> <li><a href="">Amet</a> </li> </ul> </li> </ul></nav>
How do you transition between display:none and display:block?
If you use visibility
and opacity
in conjunction with max-height
, you can achieve a nice transition from visible to hidden or vice-versa. Setting the element's max-height
to 0
when it's hidden, and max-height
to Xpx
(larger than your element will ever be) when visible, prevents the element from messing with your layout in any way (as you mentioned in your question).
Here's a quick example:
var visible = document.querySelector(".visible");
function hide() { visible.classList.add("hidden");}
visible.addEventListener("click", hide);
div { background-color: blue; padding: 40px; color: white; cursor: pointer; transition: all .1s ease;}
.visible { visibility: visible; opacity: 1; max-height: 1000px;}
.hidden { visibility: hidden; opacity: 0; max-height: 0;}
<div class="visible">Click to hide</div>
How can I animate my less from display: block to display: none ?
You cannot animate or transition from display: block;
to display: none;
, so you will need to remove this if you wish to animate it.
To ensure it fades and is removed you should animate the visibilty
and opacity
attributes.
Alternatively if you are using jQuery you can use the .fadeOut()
function.
MDN - CSS Visibility
jQuery - fadeOut()
CSS Transition not firing with Opacity + Display
Toogling display property it's bad way for fade element, Similar topics were already processed e.g: CSS3 transition doesn't work with display property
"display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead."
quotation author:
Hashem Qolami
You should try to do this by deelay like here Animating from “display: block” to “display: none”
or try toogling class like here: http://jsfiddle.net/eJsZx/19/
CSS:
.Modal {
display: block;
opacity: 0;
transition: all 300ms ease 0s;
height: 0px;
overflow: hidden;
}
.ModalVisible {
display: block;
opacity: 1;
height: 50px;
}
Jquery:
$('button').on('click', function () {
$('#ModalId').addClass('ModalVisible');
});
Html:
<div id='ModalId' class="Modal" > content <br> content </div>
<button>show</button>
Changing display and opacity with CSS animation
You should separate setting the display
property from setting the properties involved in the animation. If you set them in one round the animations won't run (the problem is with display: none
). One way is to do a setTimeout
.
Also, my suggestion is to never change style properties from JS, always manipulate classes for better separation. Something like this will do:
var $foo = $('#foo').addClass('display'); setTimeout(function () { $foo.addClass('show');});
#foo { transition: opacity 1s ease-in-out; opacity: 0; display: none;}
#foo.display { display: inline-block;}
#foo.show { opacity: 1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><button id='foo'>Foo</button>
increasing/lowering image opacity as a transition between lists of images
For myself, I would do it like this:
var background = document.getElementById("background");
var currentPos = 0;
var images = ["https://i.stack.imgur.com/MraLT.jpg", "https://i.stack.imgur.com/VxVNC.jpg", "https://i.stack.imgur.com/A9VLC.jpg", "https://i.stack.imgur.com/oYG0R.jpg"],
i = 0;
function changeimage() {
if (++currentPos >= images.length) currentPos = 0;
background.style.backgroundImage = "url(" + images[currentPos] + ")";
}
setInterval(changeimage, 3000);
.background { display: grid; place-items: center; font: bold 48px sans-serif; text-shadow: 0 0 4px #fff, 0 0 2px #fff;
height: 1000px;
background-repeat: no-repeat;
background-size: cover;
transition: 2s linear;
}
<div id="background" class="text-center background">Only transition</div>
Related Topics
How to Validate Vendor Prefixes in CSS Like -Webkit- and -Moz-
How to Include View/Partial Specific Styling in Angularjs
Select All Child Elements Recursively in Css
Does Element Width Include Padding
Css: Center Element Within a ≪Div≫ Element
Specify Multiple Attribute Selectors in Css
How to Make a Div Unselectable
How to Make the Items in the Last Row Consume Remaining Space in CSS Grid
Is the CSS :Not() Selector Supposed to Work With Distant Descendants
Scrolling a Flexbox With Overflowing Content
Wait For Fonts to Load Before Rendering Web Page
How to Delay a :Hover Effect in Css
Repeat Table Headers in Print Mode
What Are the Rules For CSS Media Query Overlap
Common CSS Media Queries Break Points
What Does It Mean When a CSS Rule Is Grayed Out in Chrome's Element Inspector
Scrollable Menu with Bootstrap - Menu Expanding Its Container When It Should Not