CSS3 Transition Fadein with Display:None

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>

CSS3 transition fadein with display:none

Instead of display:none, try using visibility: hidden;

FIDDLE

See this article which states:

visibility animates despite the CSS Basic Box Model spec saying
“Animatable: no”

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>

Display none in CSS fade out does not work or hide the div

To add to @Highdef answer,.

If you don't mind adding a bit of Javascript, you can listen for the animation end event, and set display none manually.

const e = document.getElementById("a");e.addEventListener("animationend", (ev) => {  if (ev.type === "animationend") {    e.style.display = "none";  }}, false);

#a {  width: 200px;  height: 200px;  background: red;  -webkit-animation: fadeinout 4s linear forwards;  animation: fadeinout 4s linear forwards;  opacity: 0;}
@keyframes fadeinout {  50% {    opacity: 1;  }  100% {    opacity: 0;  }}

<div style="border:1px solid black;width:200px;">  <div id="a">  </div></div>

CSS transition disabled by `display:none`

A simple explanation of display: none:

Turns off the display of an element (it has no effect on layout); all
descendant elements also have their display turned off. The document
is rendered as though the element did not exist.

(Emphasis mine)

The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.

Workaround

The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.

div {  width: 100px;  height: 50px;  background: red;  border-radius: 50%;  transition: border-radius 1s;  animation: display 1s;}#hover:hover,#hover:hover ~ div {  border-radius: 0%;}#hover:hover ~ #hide1 {  visibility: hidden;}#hover:hover ~ #hide2 {  display: none;}@keyframes display {  0% {    border-radius: 0;  }  100% {    border-radius: 50%;  }}

<div id="hover">hover me for transition</div><div id="hide1">I transition back</div><div id="hide2">but I don't (unless I have an animation)</div>

CSS animation keyframes with display none works to fade in, but not fade out

Trying to animate the display:none is the root of your problem. The confusion for why the fade-in works and the fade-out doesn't comes from the combination of using both display and opacity.

The display property is only being dictated by whether .active is applied; the animations aren't actually changing it, whereas the opacity is animated as expected. On the fade-in, this means that you immediately show your element, which then transitions from transparent to opaque. On the fade-out, this means that you immediately hide your element, which then transitions from opaque to transparent while hidden.

There are a couple different ways you could solve this, but it sort of depends on the context. For example, you could leave it as a block element and use the height property to make it collapse:

$('button').on('click', function(e) {  e.preventDefault();  $(this).siblings('.box').toggleClass('active');})

@import "bourbon"; * {  box-sizing: border-box;  text-align: center;}button {  margin: 30px 0;  border: 1px solid #ccc;  text-align: center;  padding: 1em;  background: none;  box-shadow: none;}.box {  margin: 0 auto;  width: 80%;  height: 0;  display: block;  line-height: 100px;  background: #ccc;  border: 1px solid #444;  text-align: center;  opacity: 0;  animation: FadeOut 1s ease-in-out;}.box.active {  display: block;  height: initial;  opacity: 1;  animation: FadeIn 1s ease-in-out;}@keyframes FadeIn {  0% {    opacity: 0;    height: initial;  }  100% {    opacity: 1;    height: initial;  }}@keyframes FadeOut {  0% {    opacity: 1;    height: initial;  }  99% {    opacity: 0;    height: initial;  }  100% {    height: 0;    opacity: 0;    height: 0;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="col">  <button class="toggle-good">Toggle display</button>  <p class="box good">I move nicely!</p>  <p>Extra paragraph to show collapse</p></div>

Change display from block to none, then fade in

Changing the display from block to none also changes the opacity for some reason. Because Q2 is already hidden with the opacity set to 0 there is not need to change set the display value.

Setting initial display value of Q2 to block and not changing the display value will give you the expect result.

const Q1 = document.getElementById("Q1"); const Q2 = document.getElementById("Q2"); const p1 = document.getElementById("p1");   Q1.style.display = "block"; Q1.style.opacity = 100; Q1.style.transition = "opacity 1.0s";   Q2.style.display = "none"; Q2.style.opacity = 0; Q2.style.transition = "opacity 1.0s";   const f_fade1 = (() => { Q1.style.opacity = 0; }); const hide_1 = (() => { Q1.style.display = "none"; }); const unhide_2 = (() => { Q2.style.display = "block"; Q2.offsetHeight; }); const f_unfade2 = (() => { Q2.style.opacity = 1; });   p1.addEventListener("click", e => {    f_fade1();    Q1.addEventListener('transitionend', e => {      hide_1();      unhide_2();      f_unfade2();    }); });

<div id="Q1">  <table>    <tr class="highOption">      <td>          <label class="container">              <input type="radio" id="1A" name="radio1" value="Agressive">              <span class="checkmark"></span>          </label>      </td>      <td>Aggressive<br>(99)</td>      <td>100%</td>      <td>          <div class="pie" style="background: conic-gradient(#2453B7 1000%, #44CF6C 0);"></div>      </td>      <td>55%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">          <input type="radio" id="1B" name="radio1" value="Agressive/Moderate">          <span class="checkmark"></span>        </label>      </td>      <td>Moderate/Aggressive<br>(97-98)</td>      <td>80%</td>      <td>        <div class="pie" style="background: conic-gradient(#2453B7 80%, #44CF6C 0);"></div>      </td>      <td>45%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">          <input type="radio" id="1C" name="radio1" value="Moderate">          <span class="checkmark"></span>        </label>      </td>      <td>Moderate<br>(93-96)</td>      <td>60%</td>      <td>        <div class="pie" style="background: conic-gradient(#2453B7 60%, #44CF6C 0);"></div>      </td>      <td>35%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">            <input type="radio" id="1D" name="radio1" value="Moderate/Conservative">            <span class="checkmark"></span>        </label>      </td>      <td>Moderate/Conservative<br>(85-92)</td>      <td>40%</td>      <td>        <div class="pie" style="background: conic-gradient(#2453B7 40%, #44CF6C 0);"></div>      </td>      <td>28%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">            <input type="radio" id="1E" name="radio1" value="Conservative">            <span class="checkmark"></span>        </label>      </td>      <td>Conservative<br>(51-84)</td>      <td>20%</td>      <td>        <div class="pie" style="background: conic-gradient(#2453B7 20%, #44CF6C 0);"></div>      </td>      <td>20%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">            <input type="radio" id="1F" name="radio1" value="Fixed Income">            <span class="checkmark"></span>        </label>      </td>      <td>Fixed Income<br>(1-50)</td>      <td>100%</td>      <td>        <div class="pie" style="background: conic-gradient(#2453B7 0%, #44CF6C 0);"></div>      </td>      <td>10%</td>    </tr>  </table></div>        <div id="Q2">  <table>    <tr class="highOption">      <td>        <label class="container">          <input type="radio" id="2A" name="radio2" value="Core 0%/Explore 100%">             <span class="checkmark"></span>        </label>      </td>      <td>100%</td>      <td colspan="2">        <div class="pie" style="background: conic-gradient(#00108E 0%, #1089FF 0); align:center;"></div>      </td>      <td> 0%</td>    </tr>    <tr class="highOption">      <td>        <label class="container">          <input type="radio" id="2B" name="radio2" value="Core 25%/Explore 75%">          <span class="checkmark"></span>        </label>      </td>        <td> 75%</td>        <td colspan="2">            <div class="pie" style="background: conic-gradient(#00108E 25%, #1089FF 0); align:center;"></div>        </td>        <td> 25%</td>      </tr>     </table></div>    <button type="button" id="p1">Click me</button>

---

Related Topics