Transitions on the CSS display property

Question

I m currently designing a CSS  mega dropdown  menu - basically a regular CSS-only dropdown menu  but one that contains different types of content   At the moment  it appears that CSS nbsp 3 transitions don t apply to the  display  property  i e   you can t do any sort of transition from display  none to display  block  or any combination    Is there a way for the second-tier menu from the above example to  fade in  when someone hovers over one of the top level menu items   I m aware that you can use transitions on the visibility  property  but I can t think of a way to use that effectively   I ve also tried using height  but that just failed miserably   I m also aware that it s trivial to achieve this using JavaScript  but I wanted to challenge myself to use just CSS  and I think I m coming up a little short

User · Answer

I suspect anyone just starting CSS transitions quickly discovers that they don't work if you're modifying the display property (block/none) at the same time. One workaround that hasn't yet been mentioned is that you can continue to use display:block/none to hide/show the element, but set its opacity to 0 so that even when it's display:block, it's still invisible.

Then to fade it in, add another CSS class such as "on" which sets the opacity to 1 and defines the transition for opacity. As you may have imagined, you'll have to use JavaScript to add that "on" class to the element, but at least you're still using CSS for the actual transition.

P.S. If you find yourself in a situation where you need to do both display:block, and add class "on", at the same time, defer the latter using setTimeout. Otherwise, the browser just sees both things as happening at once and disables the transition.

User · Answer

You can get this to work the natural way you expected - using display - but you have to throttle the browser to get it to work  using either Javascript or as others have suggested a fancy trick with one tag inside another  I don t care for the inner tag as it further complicates CSS and dimensions  so here s the Javascript solution  https   jsfiddle net b9chris hweyecu4 17  Starting with a box like   lt div id  quot box quot  class  quot hidden quot  gt Lorem lt  div gt   A hidden box  div hidden       display  none     box       transition  opacity 1s          We re going to use a trick found in a related q a  checking offsetHeight to throttle the browser instantaneously  https   stackoverflow com a 16575811 176877 First  a library formalizing the above trick    fn noTrnsn   function          return this each function  i  tag            tag style transition    none                fn resumeTrnsn   function          return this each function  i  tag            tag offsetHeight              tag style transition   null              Next  we re going to use it to reveal a box  and fade it in      button   on  click   function         var tag       box        if  tag hasClass  hidden            tag noTrnsn   removeClass  hidden            css   opacity  0             resumeTrnsn   css   opacity  1         else         tag css   opacity  0          This fades the box in and out  So   noTrnsn   turns off transitions  then we remove the hidden class  which flips display from none to its default  block  We then set opacity to 0 to get ready for fading in  Now that we ve set the stage  we turn transitions back on  with  resumeTrnsn    And finally  kick off the transition by setting opacity to 1  Without the library  both the change to display and the change to opacity would ve gotten us undesirable results  If we simply removed the library calls  we d get no transitions at all  Note that the above does not set display to none again at the end of the fadeout animation  We can get fancier though  Let s do so with one that fades in and grows in height from 0  Fancy  https   jsfiddle net b9chris hweyecu4 22   box       transition  height 1s  opacity 1s     We re now transitioning both height and opacity  Note that we are not setting height  which means it is the default  auto  Conventionally this cannot be transitioned - moving from auto to a pixel value  like 0  will get you no transition  We re going to work around that with the library  and one more library method    fn wait   function  time  fn        if  time          this delay time       if   fn          return this       var  this   this      return this queue function  n            fn call  this           n                This is a convenience method that lets us participate in jQuery s existing fx animation queue  without requiring any of the animation framework that s now excluded in jQuery 3 x  I m not going to explain how jQuery works  but suffice to say  the  queue   and  stop   plumbing that jQuery provides help us prevent our animations from stepping on each other  Let s animate the slide down effect      button   on  click   function         var tag       box        if  tag hasClass  hidden                 Open it            Measure it         tag stop   noTrnsn   removeClass  hidden   css               opacity  0  height   auto                      var h   tag height            tag css   height  0    resumeTrnsn              Animate it          css   opacity  1  height  h             wait 1000  function                 tag css   height   auto                        else              Close it            Measure it         var h   tag noTrnsn   height            tag stop   css   height  h             resumeTrnsn              Animate it          css   opacity  0  height  0             wait 1000  function                 tag addClass  hidden                           This code begins by checking on  box and whether it s currently hidden  by checking on its class  But it accomplishes more using the wait   library call  by adding the hidden class at the end of the slideout fade animation  which you d expect to find if it is in fact hidden - something the above simpler example could not do  This happens to also enable display hiding the element over and over  which was a bug in the previous example  because the hidden class was never restored  You can also see CSS and class changes being called after  noTrnsn   to generally set the stage for animations  including taking measurements  like measuring what will be the final height of  box without showing that to the user  before calling  resumeTrnsn    and animating it from that fully-set stage to its goal CSS values  Old Answer https   jsfiddle net b9chris hweyecu4 1  You can have it transition on click with  function toggleTransition       var el      quot div box1 quot       if  el length        el 0  className    quot box quot       el stop   css  maxWidth  10000   animate  maxWidth  10001   2000  function             el 0  className    quot box hidden quot               else       el      quot div box quot        el 0  className    quot box quot       el stop   css  maxWidth  10001   animate  maxWidth  10000   50  function             el 0  className    quot box box1 quot                  return el     someTag click toggleTransition    The CSS is what you d guess   hidden       display  none     box       width  100px      height  100px      background-color  blue      color  yellow      font-size  18px      left  20px      top  20px      position  absolute      -webkit-transform-origin  0 50       transform-origin  0 50       -webkit-transform  scale  2       transform  scale  2       -webkit-transition  transform 2s      transition  transform 2s     box1      -webkit-transform  scale 1       transform  scale 1      The key is throttling the display property  By removing the hidden class and then waiting 50  ms  then starting the transition via the added class  we get it to appear and then expand like we wanted  instead of it just blipping onto the screen without any animation  Similar occurs going the other way  except we wait till the animation is over before applying hidden  Note  I m abusing  animate maxWidth  here to avoid setTimeout race conditions  setTimeout is quick to introduce hidden bugs when you or someone else picks up code unaware of it   animate   can easily be killed with  stop    I m just using it to put a 50  ms or 2000  ms delay on the standard fx queue where it s easy to find resolve by other coders building on top of this

User · Answer

Fade it in with CSS Animations   item        display  none      item hover        display  block       animation  fadeIn 0 5s      keyframes fadeIn        from             opacity  0               to             opacity  1

User · Answer

According to W3C Working Draft 19 November 2013 display is not an animatable property  Fortunately  visibility is animatable  You may chain its transition with a transition of opacity  JSFiddle     HTML    lt a href  http   example com  id  foo  gt Foo lt  a gt   lt button id  hide-button  gt Hide lt  button gt   lt button id  show-button  gt Show lt  button gt   CSS    foo       transition-property  visibility  opacity      transition-duration  0s  1s      foo hidden       opacity  0      visibility  hidden      transition-property  opacity  visibility      transition-duration  1s  0s      transition-delay  0s  1s     JavaScript for testing   var foo   document getElementById  foo     document getElementById  hide-button   onclick   function          foo className    hidden       document getElementById  show-button   onclick   function          foo className             Note that if you just make the link transparent  without setting visibility  hidden  then it would stay clickable

User · Answer

I ran into this today  with a position  fixed modal that I was reusing  I couldn t keep it display  none and then animate it  as it just jumped into appearance  and and z-index  negative values  etc  did weird things as well   I was also using a height  0 to height  100   but it only worked when the modal appeared  This is the same as if you used left  -100  or something   Then it struck me that there was a simple answer  Et voila   First  your hidden modal  Notice the height is 0  and check out the height declaration in transitions    it has a 500ms  which is longer than my opacity transition  Remember  this affects the out-going fade-out transition  returning the modal to its default state    modal-overlay       background   999      background  rgba 33 33 33  2       display  block      overflow  hidden      height  0      width  100       position  fixed      top  0      left  0      opacity  0      z-index  1      -webkit-transition  height 0s 500ms  opacity 300ms ease-in-out         -moz-transition  height 0s 500ms  opacity 300ms ease-in-out              -ms-transition  height 0s 500ms  opacity 300ms ease-in-out           -o-transition  height 0s 500ms  opacity 300ms ease-in-out          transition  height 0s 500ms  opacity 300ms ease-in-out      Second  your visible modal  Say you re setting a  modal-active to the body  Now the height is 100   and my transition has also changed  I want the height to be instantly changed  and the opacity to take 300ms    modal-active  modal-overlay       height  100       opacity  1      z-index  90000      -webkit-transition  height 0s  opacity 300ms ease-in-out         -moz-transition  height 0s  opacity 300ms ease-in-out          -ms-transition  height 0s  opacity 300ms ease-in-out           -o-transition  height 0s  opacity 300ms ease-in-out              transition  height 0s  opacity 300ms ease-in-out      That s it  it works like a charm

User · Answer

I suspect that the reason that transitions are disabled if display is changed is because of what display actually does  It does not change anything that could conceivably be smoothly animated   display  none  and visibility  hidden  are two entirely different things  Both do have the effect of making the element invisible  but with visibility  hidden  it   s still rendered in the layout  but just not visibly so  The hidden element still takes up space  and is still rendered inline or as a block or block-inline or table or whatever the display element tells it to render as  and takes up space accordingly  Other elements do not automatically move to occupy that space  The hidden element just doesn   t render its actual pixels to the output   display  none on the other hand actually prevents the element from rendering entirely  It does not take up any layout space  Other elements that would   ve occupied some or all of the space taken up by this element now adjust to occupy that space  as if the element simply did not exist at all   display is not just another visual attribute  It establishes the entire rendering mode of the element  such as whether it   s a block  inline  inline-block  table  table-row  table-cell  list-item  or whatever  Each of those have very different layout ramifications  and there would be no reasonable way to animate or smoothly transition them  try to imagine a smooth transition from block to inline or vice-versa  for instance     This is why transitions are disabled if display changes  even if the change is to or from none     none isn   t merely invisibility  it   s its own element rendering mode that means no rendering at all

User · Answer

You can add a custom animation to the block property now    keyframes showNav     from  opacity  0     to  opacity  1      subnav-is-opened  main-nav  secondary-nav     display  block    animation  showNav 250ms ease-in-out both      Demo  In this demo the sub-menu changes from display none to display block and still manages to fade

User · Answer

You can also use this    dropdown       height  0px      width  0px      opacity   0      color  white     dropdown hover       height  20px      width  50px      opacity  1      transition  opacity 200ms         Safari        -webkit-transition  opacity 200ms

User · Answer

I think SalmanPK has the closest answer  It does fade an item in or out  with the following CSS animations  However  the display property does not animate smoothly  only the opacity    -webkit-keyframes fadeIn       from   opacity  0          to   opacity  1        -webkit-keyframes fadeOut       from   opacity  1          to   opacity  0        If you want to animate the element moving from display block to display none  I can t see that it is currently possible just with CSS  You have to get the height and use a CSS animation to decrease the height  This is possible with CSS as shown in the example below  but it would be tricky to know the exact height values you need to animate for an element   jsFiddle example  CSS   -webkit-keyframes pushDown     0        height  10em        25        height  7 5em        50        height  5em        75        height  2 5em        100        height  0em          push-down       -webkit-animation  pushDown 2s forwards linear      JavaScript  var element   document getElementById  element        Push item down element className   element className     push-down

User · Answer

It can be handle by using transition timing functions step-end and step-start  For example  https   jsfiddle net y72h8Lky    x000D   x000D      run   on  click   function     x000D          popup   addClass  show    x000D      x000D      popup   on  click   function     x000D          popup   removeClass  show    x000D     x000D   popup   x000D      opacity  0  x000D      display  block  x000D      position  absolute  x000D      top  100   x000D      bottom  0  x000D      left  0  x000D      right  0  x000D      z-index  1450  x000D      background-color  rgba 0  175  236  0 6   x000D      transition  opacity 0 3s ease-out  top 0 3s step-end  x000D    x000D   popup show   x000D      transition  opacity 0 3s ease-out  top 0 3s step-start  x000D      opacity  1  x000D      top  0  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  popup  gt  lt  div gt  x000D   lt button class  run  style  font-size  24px   gt Click on me lt  button gt  x000D   x000D   x000D

User · Answer

I started an open source skeleton project called Toggle Display Animate   This skeleton helper will allow you to easily mimic jQuery show hide  but with in out CSS nbsp 3 transition animations   It uses class toggles so you can use any CSS methods you want on elements besides display none block table inline  etc  as well as other alternate uses that can be thought up   Its main design purpose is for element toggle states  and it supports a revert state where hiding the object allows you to run your keyframe in reverse or play an alternate animation for hiding the element   Most of the markup for the concept I am working on is CSS  and there is very little JavaScript actually used   There is a demo here  http   marcnewton co uk projects toggle-display-animate

User · Answer

Instead of callbacks  which don t exist in CSS  we can use transition-delay property   selector       overflow  hidden      Hide the element content  while height   0        height  0      opacity  0      transition  height 0ms 400ms  opacity 400ms 0ms     selector visible       height  auto  opacity  1      transition  height 0ms 0ms  opacity 600ms 0ms      So  what s going on here   When visible class is added  both height and opacity start animation without delay  0  ms   though height takes 0  ms to complete animation  equivalent of display  block  and opacity takes 600  ms   When visible class is removed  opacity starts animation  0  ms delay  400  ms duration   and height waits 400  ms and only then instantly  0  ms  restores initial value  equivalent of display  none in the animation callback     Note  this approach is better than ones using visibility  In such cases  the element still occupies the space on the page  and it s not always suitable  For more examples please refer to this article

User · Answer

You can simply use the CSS visibility  hidden visible instead of display   none block  div       visibility hidden      -webkit-transition  opacity 1s ease-out      -moz-transition  opacity 1s ease-out      -o-transition  opacity 1s ease-out      transition  opacity 1s ease-out      opacity  0     parent hover  gt  div       opacity  1      visibility  visible

User · Answer

My neat JavaScript trick is to separate the entire scenario into two different functions   To prepare things  one global variable is declared and one event handler is defined     var tTimeout    element addEventListener  transitionend   afterTransition  true    firefox   element addEventListener  webkitTransitionEnd   afterTransition  true    chrome   Then  when hiding element  I use something like this    function hide      element style opacity   0     function afterTransition      element style display    none       For reappearing the element  I am doing something like this   function show      element style display    block     tTimeout   setTimeout timeoutShow  100      function timeoutShow      element style opacity   1      It works  so far

User · Answer

Well another way to apply transition in this situation without using keyframes is to set the width of your element to zero and then unset it on hover  className    visibility hidden    opacity  0    transition   2s    width 0      className hover    visibility visible    margin-right   5rem    opacity  1    width unset

User · Answer

You can do this with transition events  so you build two CSS classes for the transition  one holding the animation other  holding the display none state  And you switch them after the animation is ended  In my case I can display the divs again if I press a button  and remove both classes   Try the snippet below      x000D   x000D    document  ready function     x000D       Assign transition event x000D       table   on  animationend webkitAnimationEnd     visibility switch off   function event    x000D         We check if this is the same animation we want x000D      if  event originalEvent animationName     col hide anim     x000D           After the animation we assign this new class that basically hides the elements  x000D          this  addClass  animation-helper-display-none    x000D        x000D   x000D        x000D   x000D       button   click function event    x000D   x000D         table tr  hide-col   toggleClass function     x000D           We switch the animation class in a toggle fashion    x000D           and we know in that after the animation end  there x000D           is will the animation-helper-display-none extra x000D           class  that we nee to remove  when we want to x000D           show the elements again  depending on the toggle x000D           state  so we create a relation between them  x000D        if    this  is   animation-helper-display-none      x000D             I m toggling and there is already the above class  then x000D             what we want it to show the elements   so we remove x000D             both classes    x000D          return  visibility switch off animation-helper-display-none   x000D          x000D        else   x000D             Here we just want to hide the elements  so we just x000D             add the animation class  the other will be added x000D             later be the animationend event    x000D          return  visibility switch off   x000D          x000D          x000D        x000D      x000D  table th   x000D    background-color  grey  x000D    x000D   x000D  table td   x000D    background-color  white  x000D    padding  5px  x000D    x000D   x000D   animation-helper-display-none   x000D    display  none  x000D    x000D   x000D  table tr  visibility switch off   x000D    animation-fill-mode  forwards  x000D    animation-name  col hide anim  x000D    animation-duration  1s  x000D    x000D   x000D   -webkit-keyframes col hide anim   x000D    0   opacity  1   x000D    100   opacity  0   x000D    x000D   x000D   -moz-keyframes col hide anim   x000D    0   opacity  1   x000D    100   opacity  0   x000D    x000D   x000D   -o-keyframes col hide anim   x000D    0   opacity  1   x000D    100   opacity  0   x000D    x000D   x000D   keyframes col hide anim   x000D    0     opacity  1   x000D    100   opacity  0   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D     lt theader gt  x000D       lt tr gt  x000D         lt th gt Name lt  th gt  x000D         lt th class  hide-col  gt Age lt  th gt  x000D         lt th gt Country lt  th gt  x000D       lt  tr gt  x000D     lt  theader gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Name lt  td gt  x000D         lt td class  hide-col  gt Age lt  td gt  x000D         lt td gt Country lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt button gt Switch - Hide Age column with fadeout animation and display none after lt  button gt  x000D   x000D   x000D

User · Answer

After the accepted answer from Guillermo was written  the CSS transition specification of 2012-04-03 changed the behavior of the visibility transition and now it is possible to solve this problem in a shorter way  without the use of transition-delay    myclass  gt  div                      transition visibility 1s  opacity 1s                     visibility hidden   opacity 0                   myclass hover  gt  div                    visibility visible  opacity 1     The run time specified for both transitions should usually be identical  although a slightly longer time for visibility is not a problem    For a running version  see my blog post CSS Transition Visibility   W r t  the title of the question  Transitions on the display  property  and in response to comments from Rui Marques and josh to the accepted answer   This solution works in cases where it is irrelevant if the display or visibility property is used  as it probably was the case in this question    It will not completely remove the element as display none  just make it invisible  but it still stays in the document flow and influences the position of the following elements   Transitions that completely remove the element similar to display none can be done using height  as indicated by other answers and comments   max-height  or margin-top bottom  but also see How can I transition height  0  to height  auto  using CSS  and my blog post Workarounds for CSS Transitions on the Display and Height Properties   In response to comment from GeorgeMillo  Both properties and both transitions are needed  The opacity property is used to create a fade-in and fade-out animation and the visibility property to avoid the element still reacting on mouse events  Transitions are needed on opacity for the visual effect and on visibility to delay hiding until the fade-out is finished

User · Answer

I finally found a solution for me  by combining opacity with position absolute  not to occupy space when hidden     toggle     opacity  0    position  absolute    transition  opacity 0 8s      parent hover  toggle     opacity  1    position  static

User · Answer

JavaScript is not required  and no outrageously huge max-height is needed  Instead  set your max-height on your text elements  and use a font relative unit such as rem or em  This way  you can set a maximum height larger than your container  while avoiding a delay or  popping  when the menu closes   HTML   lt nav gt     lt input type  checkbox    gt     lt ul gt       lt li gt Link 1 lt  li gt       lt li gt Link 1 lt  li gt       lt li gt Link 1 lt  li gt       lt li gt Link 1 lt  li gt     lt  ul gt   lt  nav gt    CSS  nav input   ul li      Notice I set max-height on li  not ul    max-height  0     nav input checked   ul li      max-height  3rem     A little bigger to allow for text-wrapping - but not outrageous     See an example here  http   codepen io mindfullsilence pen DtzjE

User · Answer

At the time of this post all major browsers disable CSS transitions if you try to change the display property  but CSS animations still work fine so we can use them as a workaround   Example Code  you can apply it to your menu accordingly  Demo   Add the following CSS to your stylesheet    -webkit-keyframes fadeIn       from   opacity  0          to   opacity  1       keyframes fadeIn       from   opacity  0          to   opacity  1        Then apply the fadeIn animation to the child on parent hover  and of course set display  block     parent hover  child       display  block      -webkit-animation  fadeIn 1s      animation  fadeIn 1s        Update 2019 - Method that also supports fading out    Some JavaScript code is required    x000D   x000D     We need to keep track of faded in elements so we can apply fade out later in CSS x000D  document addEventListener  animationstart   function  e    x000D    if  e animationName      fade-in     x000D        e target classList add  did-fade-in    x000D      x000D      x000D   x000D  document addEventListener  animationend   function  e    x000D    if  e animationName      fade-out     x000D        e target classList remove  did-fade-in    x000D       x000D      x000D  div   x000D      border  5px solid  x000D      padding  10px  x000D    x000D   x000D  div hover   x000D      border-color  red  x000D    x000D   x000D   parent  child   x000D    display  none  x000D    x000D   x000D   parent hover  child   x000D    display  block  x000D    animation  fade-in 1s  x000D    x000D   x000D   parent not  hover   child did-fade-in   x000D    display  block  x000D    animation  fade-out 1s  x000D    x000D   x000D   keyframes fade-in   x000D    from   x000D      opacity  0  x000D      x000D    to   x000D      opacity  1  x000D      x000D    x000D   x000D   keyframes fade-out   x000D    from   x000D      opacity  1  x000D      x000D    to   x000D      opacity  0  x000D      x000D    x000D   lt div class  parent  gt  x000D      Parent x000D       lt div class  child  gt  x000D          Child x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve came across this issue multiple times and now simply went with    block     opacity  1    transition  opacity 250ms ease      block--invisible     pointer-events  none    opacity  0      By adding the class block--invisible the whole Elements will not be clickable but all Elements behind it will be because of the pointer-events none which is supported by all major browsers  no IE  lt  11

User · Answer

It is as simple as the following      keyframes fadeout       0    opacity  1  height  auto        90    opacity  0  height  auto        100    opacity  0  height  0    animation  fadeout linear 0 5s 1 normal forwards  important    Get it to fade away  and then make it height 0   Also make sure to use forwards so that it stays in the final state

User · Answer

Instead of using display you could store the element  off-screen  until you needed it  and then set its position to where you want it and transform it at the same time  This brings up a whole host of other design issues though  so your mileage may vary   You probably wouldn t want to use display anyway  as you d want the content to be accessible to screen readers  which for the most part try to obey rules for visibility - i e   if it shouldn t be visible to the eye  it won t show up as content to the agent

User · Answer

I found better way for this issue  you can use CSS Animation and make your awesome effect for showing items   item        display  none      item hover        display  block       animation  fade in show 0 5s     keyframes fade in show        0              opacity  0            transform  scale 0               100              opacity  1            transform  scale 1

User · Answer

The simplest universal solution to the problem is  feel free to specify display none in your CSS  however you will have change it to block  or whatever else  using JavaScript  and then you ll also have to add a class to your element in question that actually does the transition with setTimeout    That s all   I e     lt style gt       el           display  none          opacity  0             el auto-fade-in           opacity  1          transition  all 1s ease-out     Future  future  please come sooner             -webkit-transition  all 1s ease-out          -moz-transition  all 1s ease-out          -o-transition  all 1s ease-out         lt  style gt    lt div id el gt Well  well  well lt  div gt    lt script gt      var el   document getElementById  el        el style display    block       setTimeout function      el className    auto-fade-in     0    lt  script gt    This was tested in the latest sane browsers  Obviously it shouldn t work in Internet nbsp Explorer nbsp 9 or earlier

User · Answer

Change overflow hidden to overflow visible  It works better  I use like this    menu ul li ul       background-color  fe1c1c      width 85px      height 0px      opacity 0      box-shadow 1px 3px 10px  000000      border-radius 3px      z-index 1      -webkit-transition all 0 5s ease      -moz-transition all 0 6s ease      menu ul li hover ul        overflow visible      opacity 1      height 140px      visible is better because overflow hidden act exactly like a display none

User · Answer

I had a similar issue that I couldn t find the answer to  A few Google searches later led me here  Considering I didn t find the simple answer I was hoping for  I stumbled upon a solution that is both elegant and effective   It turns out the visibility CSS property has a value collapse which is generally used for table items  However  if used on any other elements it effectively renders them as hidden  pretty much the same as display  hidden but with the added ability that the element doesn t take up any space and you can still animate the element in question   Below is a simple example of this in action    x000D   x000D  function toggleVisibility     x000D    let exampleElement   document querySelector  span    x000D    if  exampleElement classList contains  visible      x000D      return  x000D      x000D    exampleElement innerHTML    I will not take up space    x000D    exampleElement classList toggle  hidden    x000D    exampleElement classList toggle  visible    x000D    setTimeout      gt    x000D      exampleElement classList toggle  visible    x000D      exampleElement classList toggle  hidden    x000D       3000   x000D    x000D   main   x000D    display  flex  x000D    flex-direction  column  x000D    width  300px  x000D    text-align  center  x000D    x000D   x000D   hidden   x000D    visibility  collapse  x000D    opacity  0  x000D    transition  visibility 2s  opacity 2s linear  x000D    x000D   x000D   visible   x000D    visibility  visible  x000D    opacity  1  x000D    transition  visibility 0 5s  opacity 0 5s linear  x000D    x000D   lt div id  main  gt  x000D     lt button onclick  toggleVisibility    gt Click Me  lt  button gt  x000D     lt span class  hidden  gt  lt  span gt  x000D     lt span gt I will get pushed back up    lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to hide the element by other means in order to get this to work   I accomplished the effect by positioning both  lt div gt s absolutely and setting the hidden one to opacity  0   If you even toggle the display property from none to block  your transition on other elements will not occur   To work around this  always allow the element to be display  block  but hide the element by adjusting any of these means    Set the height to 0  Set the opacity to 0  Position the element outside of the frame of another element that has overflow  hidden    There are likely more solutions  but you cannot perform a transition if you toggle the element to display  none  For example  you may attempt to try something like this   div       display  none      transition  opacity 1s ease-out      opacity  0    div active       opacity  1      display  block      But that will not work  From my experience  I have found this to do nothing   Because of this  you will always need to keep the element display  block - but you could get around it by doing something like this   div       transition  opacity 1s ease-out      opacity  0      height  0      overflow  hidden    div active       opacity  1      height  auto

User · Answer

If you are using jQuery to set your classes  this will work 100     x000D   x000D    document  ready function     x000D       button   click function     x000D      var container       container    x000D       x000D      if   container hasClass  active      x000D        container addClass  show   outerWidth    x000D        container addClass  active    x000D        x000D      else   x000D        container removeClass  active   one  transitionend   function     x000D          container removeClass  show    x000D            x000D        x000D        x000D      x000D   container   x000D    display  none  x000D    opacity  0  x000D    transition  opacity 0 3s ease  x000D    x000D   x000D   container show   x000D    display  flex  x000D    x000D    x000D   container active   x000D    opacity  1  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button type  button  gt Toggle lt  button gt  x000D   x000D   lt div class  container  gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D   lt  div gt  x000D   x000D   x000D    Of course you could just use jQuery  fadeIn   and  fadeOut   functions  but the advantage of setting classes instead is in case you want to transition to a display value other than block  as is the default with  fadeIn   and  fadeOut      Here I am transitioning to display flex with a nice fade effect

User · Answer

Taking from a few of these answers and some suggestions elsewhere  the following works great for hover menus  I m using this with Bootstrap nbsp 3  specifically    nav  dropdown-menu       display  block      overflow  hidden      max-height  0      opacity  0      transition  max-height 500ms  opacity 300ms      -webkit-transition  max-height 500ms  opacity 300ms    nav  dropdown hover  dropdown-menu       max-height  500px      opacity  1      transition  max-height 0  opacity 300ms      -webkit-transition  max-height 0  opacity 300ms      You could also use height in place of max-height if you specify both values since height auto is not allowed with transitions  The hover value of max-height needs to be greater than the height of the menu can possibly be

User · Answer

This solution has excellent compatibility  and I haven t seen it yet    hidden-element     position  absolute    z-index  -1    pointer-events  none    visibility  hidden    opacity  0    transition  visibility 0s  opacity  5s ease-out      hidden-element visible     position  static    z-index  auto    pointer-events  auto    visibility  visible    opacity  1      Explanation  it uses the visibility  hidden trick  which is compatible with    show-and-animate    in one step   but it uses the combination position  absolute  z-index  -1  pointer-events  none  to make sure that the hidden container does not take space and does not answer to user interactions

User · Answer

You can concatenate two transitions or more  and visibility is what comes handy this time    x000D   x000D  div   x000D    border  1px solid  eee  x000D    x000D  div  gt  ul   x000D    visibility  hidden  x000D    opacity  0  x000D    transition  visibility 0s  opacity 0 5s linear  x000D    x000D  div hover  gt  ul   x000D    visibility  visible  x000D    opacity  1  x000D    x000D   lt div gt  x000D     lt ul gt  x000D       lt li gt Item 1 lt  li gt  x000D       lt li gt Item 2 lt  li gt  x000D       lt li gt Item 3 lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D     Don t forget the vendor prefixes to the transition property    More details are in this article

User · Answer

display is not one of the properties that transition works upon   See Animatable CSS properties for the list of CSS properties that can have transitions applied to them  See CSS Values and Units Module Level 4  Combining Values  Interpolation  Addition  and Accumulation for how they are interpolated   Up to CSS nbsp 3 was listed in 9 1  Properties from CSS  just close the warning popup      I ve also tried using height  but that just failed miserably    Last time I had to do this  I used max-height instead  which is an animatable property  although it was a bit of a hack  it did work   but beware that it may be very janky for complex pages or users with low-end mobile devices

User · Answer

Edit  display none is not being applied in this example    keyframes hide     0        display  block      opacity  1        99        display  block        100        display  none      opacity  0          What s happening above is that through 99  of the animation display is set to block while the opacity fades out  In the last moment display property is set to none   And the most important bit is to retain the last frame after the animation ends using animation-fill-mode  forwards   hide      animation  hide 1s linear     animation-fill-mode  forwards      Here are two examples  https   jsfiddle net qwnz9tqg 3

[css] Transitions on the CSS display property

Examples related to css

Examples related to css-transitions