1

Something like

#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a{
  display: none;
  transition: display 2s;
}

Instead of just having the element in question just pop up when you set it's display I want it to gradually display.

  • 1
    No, but you can animate opacity. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties – sinisake Dec 17 '17 at 22:00
  • 1
    No, use `opacity` – StudioTime Dec 17 '17 at 22:01
  • 1
    In short, no, you cannot transition the display property. The best solution would be to transition the opacity property. You can add the visibility property as well to imitate the display property. – Matthew Dec 17 '17 at 22:05
  • in addition to previous comments you can animate property that can take number values (like height,opacity,width, top, etc etc) and not propery that takes string as values (like display, visibility, etc) – Temani Afif Dec 17 '17 at 22:08
  • Of course opacity does not prevent elements from being clicked, you can fix that by using `pointer-events: none;` or set to `display:none` after the transition has ended. and `block` before it starts. – René Dec 17 '17 at 22:15

3 Answers3

1

You can use opacity and also when the execution of transition you can made a position: absolute on your element for leave the flux.

KolaCaine
  • 2,037
  • 5
  • 19
  • 31
  • You should create a snippet so that we can see a working example of your suggestion. – Zze Dec 17 '17 at 22:33
1

No Way to animate display property You can animate just certain properties , you find all properties that can be animate here Properties can be animated link

alternatively you can use Visibility Opacity or jQuery FadeOut or Hide property

$(document).ready(function() {
    $("#apex1-1a").hover(function() {
        $(this).css('visibility','hidden');
    });
    $("#apex1-2a").hover(function() {
        $(this).css({'visibility':'hidden','opacity':0});
    });
    $("#apex1-3a").hover(function() {
        $(this).fadeOut(1000);
    });
});
#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a {
  transition: all 1s;
}
#apex1-2a {
  transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="apex1-1">
    <a href="#" id="apex1-1a">With Visibility</a>
</div>
<div id="apex1-2">
    <a href="#" id="apex1-2a">With Visibility and opacity</a>
</div>
<div id="apex1-3">
    <a href="#" id="apex1-3a">Jquery FadeOut</a>
</div>
Hasan Haghniya
  • 2,347
  • 4
  • 19
  • 29
0

No, you can't transition using the display property. But instead you can do something like this :

#apex1-1{
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
}
#apex1-1a{
 height : 0px;
  transition: display 2s;
}

This will work I guess, or you can just use the other methods mentioned above. Happy coding :).

Idev Dev
  • 184
  • 17
  • No, if the element inside of `#apex1-1a` is an image of whatever, the height here is set to 0px, but the content is always visible ;) – KolaCaine Dec 17 '17 at 22:14
  • 1
    @Jonathan You can set the width to 0px to. That way i't won't be visible. Using opacity will only deceive eyes but not the browser because the element will be there. Maybe he doesn't want the element to take his width and height that's why he is using display none. ;) – Idev Dev Dec 17 '17 at 22:22
  • @IdevDev You should create a snippet so that we can see a working example of your suggestion. – Zze Dec 17 '17 at 22:32
  • @KolaCaine The content is _not_ visible if `overflow: hidden`? – K3---rnc Nov 04 '18 at 14:39