Question 209330 in CSS Question posted in
Some basic documentation can be found here.

Can @keyframes of css animate change the dislplay attribute?

There are two questions, and I can’t think of the solution.
Example: https://jsfiddle.net/uL3fktrh/

Question 1. After enabling display:none of #a in css, animate will fail.

Question 2. I want to restart animate every time I move into .bt, so I wrote the following syntax to remove and reload but no longer animate.

$(".bt").mouseenter(function() {
  $("#a").removeClass("cd-fade-in");
  $("#a").addClass("cd-fade-in");
});

If animate cannot change the display property, what should I do to get the same effect?

Tags:

3

Answers


  1. 0

    The display property is not animatable, as you’ve noticed. But the visibility property is, and you can use it in a similar way by setting visibility: hidden; instead of display: none;

    There are two important things to be aware of with this approach:

    1. Because the available values of the visibility property are discrete, when animating them the value will change at the midway point. For example:
    @keyframes becomeHidden {
    0% { visibility: visible; }
  100% { visibility: hidden; }
}

    Using that animation, the element would actually switch from visible to hidden at the 50% mark.

    The way I usually overcome this is via this sort of approach:

    @keyframes becomeHidden {
    0% { visibility: visible; }
  100% { visibility: visible; }
  100% { visibility: hidden; }
}

    This will force the element to remain visible for the duration of the animation, but then become hidden at the very end.

    1. Elements hidden via visibility: visible; still hold their space in the markup. This is an important difference from display: none;, which also removes elements from the layout. So if you use visibility to hide an element, you will probably also want to do something else (like making it use position: absolute; or collapsing its width or height) in order to make it fully disappear.

    You may also be interested to learn about how it may be effectively possible in the future to transition the display property in CSS:

    Transition to and from display:none with upcoming CSS capabilities (video)

    Add syntax to establish before-change style for css-transitions on new elements.

    Login or Signup to reply.
  2. 0

    It’s a modified version; just have a look for the illustration:

    $(".bt").mouseenter(function() {
  $("#a").fadeIn(500);
  $("#a").css('display', 'visible')
});

$(".bt").mouseleave(function() {
  $("#a").fadeOut(500);
  $("#a").css('display', 'visible')
});
    #a {
  padding: 2em;
  width: 10em;
  height: 1em;
  background: #333;
  display: none;
}

.cd-fade-in {
  animation: cd-fade-in-1 2s;
  animation-fill-mode: forwards;
  
}

@keyframes cd-fade-in-1 {
  0% {
    display: block;
    height: 1em;
  }
  100% {
    display: block;
    height: 10em;
  }
}

/*-------------------*/
.bt{
  width:4em;
  background: blue;
  margin-bottom:2em;
  color:white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bt">碰觸我
</div>
<div id="a">
</div>
    Login or Signup to reply.
  3. 0

    display property is a discrete property, so animating them doesn’t really make much sense.

    Instead what you usually want to animate is to fade the element using opacity, or to animate the height/width to 0, or to slide them out of view by animating its position, or a combination of them.

    After the animation completes, then you can remove the element with display: none. This is only necessary to tell the browser that it doesn’t need to try to render the element or its children. Unless you have a lot of these undisplayed elements and have to save some resources, you may not need to bother with actually trying to toggle this property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search