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 forvisibility
; you can’t expect a block to be half
hidden
which, by definition, would bevisible
! Fortunately, you can
useopacity
for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity
, height
and padding
properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button { width:200px; background:#ddd; transition: border-radius .3s ease .15s;}
#header #button:hover, #header #button > .content { border-radius: 0px 0px 7px 7px;}
#header #button:hover > .content { opacity: 1; height: 150px; padding: 8px; }
#header #button > .content { opacity:0; clear: both; height: 0; padding: 0 8px; overflow: hidden;
-webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd; -moz-box-shadow: 0px 2px 2px #ddd; box-shadow: 0px 2px 2px #ddd; background: #FFF;}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header"> <div id="button"> <span>This is a Button</span> <div class="content"> This is the Hidden Div </div> </div></div>
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>
Why is transition property not working in this case?
Transition will never work on display property. It works on properties like width, height, opacity etc.
In your particular case, what you can do is, use height or width to control this animation.
If your sidebar will appear from the left then you will need to set the initial width to 0 and then set the width to the actual width on click. Like this:
.side_nav {
width: 0;
transition: width 1s;
&.open {
width: 200px;
}
}
css transition not working for display: none
You can use transition for opacity but not display. A great, and complete, answer here: CSS3 transition doesn't work with display property
Transition not working when changing from display none to block
Because it has display: none
to begin with, the other styles are not being taken into the dom to be transitioned once display: block
is added.
Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show
div.
JS Fiddle
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>
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>
CSS transition doesn't work with jQuery's .toggleClass()
transition
doesn't work for display
. try to change display:none
and display:block
to opacity:0
and opacity:1
CSS Transitions Not working after toggle between classes
TL;DR. See the code snippet below which is slightly tweaked from your original code.
A few notes:
- Consider using
button
instead ofa
tag. It's a button that does something when clicked as opposed to a hyperlink that directs to a link when clicked. - Be careful with overly specific CSS rules.
div.button-dropdown-options
(i.e. element name + class name) is more specific than.button-dropdown-options
(i.e. class name only), and can trump other less specific selectors. It is what makes you overly rely on!important
in multiple places. Over specificity and!important
in combination will make it very hard to debug styling. visibility
as part oftransition
property as well. That is, something liketransition: opacity 2s, visibility 2s;
function showDropDown() {
const variantButton = document.getElementById('showdropdown');
const variantMenu = document.getElementById('variantMenu');
const animate_arrow = document.querySelector('.btn-dropdown-caret');
const options = document.querySelector('.btn-dropdown-options');
const over = document.querySelector('.swiper-container');
const calculatedOptions = window.getComputedStyle(options);
variantButton.addEventListener('click', function(event) {
variantMenu.classList.toggle('dropdownShow');
animate_arrow.classList.toggle('animate-arrow');
});
}
showDropDown();
.btn-dropdown {
display: block;
position: relative;
white-space: nowrap;
margin-top: 5px;
margin-left: 2px;
}
@media screen and (min-width: 768px) {
.btn-dropdown {
z-index: 4;
}
}
.btn-dropdown .btn-dropdown-link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.form-btn.outlined.btn-dropdown-link {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
/* -webkit-transition: color 200ms ease;
transition: color 200ms ease; */
border: 1px solid #dddddd;
box-shadow: none;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently */
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
color: #6e6d7a;
}
.form-btn.outlined.btn-dropdown-link:hover,
.form-btn.outlined.btn-dropdown-link:focus {
border: 1px solid #e4b29b;
color: #1b1b1b;
box-shadow: 0 0 0 2px rgb(228 178 155 / 10%);
}
.form-btn.outlined.btn-dropdown-link:hover svg,
.form-btn.outlined.btn-dropdown-link:focus svg {
fill: #666666;
}
.animate-arrow {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateY(-50%) rotate(180deg) !important;
}
.form-btn.outlined,
a.form-btn.outlined {
background-color: transparent;
-webkit-box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
color: #0d0c22;
}
.btn-dropdown .btn-dropdown-link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 35px;
text-align: left;
}
.form-btn,
a.form-btn {
background: #f3f3f4;
color: #0d0c22;
}
.form-btn,
a.form-btn {
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 40px;
padding: 10px 16px;
-webkit-transition: color 200ms ease;
transition: color 200ms ease;
border: none;
border-radius: 10px;
outline: none;
background: #ea4c89;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
/* Variant Selector --Span */
.btn-dropdown.btn-dropdown-neue svg.btn-dropdown-caret {
fill: #9e9ea7;
}
.btn-dropdown svg.btn-dropdown-caret {
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin: 0;
-webkit-transform: translateY(-50%) rotate(0deg);
-ms-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
fill: currentColor;
}
.form-btn svg,
button.form-btn svg {
width: 13px;
height: 13px;
margin-top: -3px;
margin-right: 2px;
fill: currentColor;
vertical-align: middle;
}
/* DropDown */
.btn-dropdown .btn-dropdown-options {
right: 0;
}
.btn-dropdown div.btn-dropdown-options {
z-index: 2;
}
.btn-dropdown-options {
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
position: absolute;
z-index: 1;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
margin-top: 4px;
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 2s, visibility 2s;
box-shadow: 0px 1px 2px rgba(128, 138, 157, 0.12), 0px 8px 32px rgba(128, 138, 157, 0.24);
}
.btn-dropdown-options ul {
padding: 8px 0;
list-style: none;
}
.btn-dropdown-options li.active a {
color: #ea4c89;
font-weight: 500;
text-decoration: none;
}
.btn-dropdown-options a {
display: block;
padding: 8px 15px;
color: #6e6d7a;
font-size: 13px;
text-decoration: none;
}
.btn-dropdown-options.dropdownShow {
/* animation: 0.3s ease 0s 1 normal forwards running dropdownAnimation !important; */
visibility: visible;
opacity: 1;
}
.visuallyhidden {
opacity: 0;
}
<span class="btn-dropdown btn-dropdown-neue">
<button id="showdropdown" class="form-btn outlined btn-dropdown-link" data-dropdown-state="closed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" class="icon btn-dropdown-caret">
<path d="M21.5265 8.77171C22.1578 8.13764 22.1578 7.10962 21.5265 6.47555C20.8951 5.84148 19.8714 5.84148 19.24 6.47555L11.9999 13.7465L4.75996 6.47573C4.12858 5.84166 3.10492 5.84166 2.47354 6.47573C1.84215 7.10979 1.84215 8.13782 2.47354 8.77188L10.8332 17.1671C10.8408 17.1751 10.8486 17.183 10.8565 17.1909C11.0636 17.399 11.313 17.5388 11.577 17.6103C11.5834 17.6121 11.5899 17.6138 11.5964 17.6154C12.132 17.7536 12.7242 17.6122 13.1435 17.1911C13.1539 17.1807 13.1641 17.1702 13.1742 17.1596L21.5265 8.77171Z"></path>
</svg>
<span data-prompt="Variant" data-fade-default="true" class="default-option">
Sandle Brown
</span>
</button>
<div id="variantMenu" class="btn-dropdown-options sets-querystring">
<ul>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
<li class="default-filter-option"><a href="?timeframe=">Now</a></li>
</ul>
</div>
</span>
Related Topics
How to Make My Flexbox Layout Take 100% Vertical Space
Text Overflow Ellipsis on Two Lines
How to Make a ≪Ul≫ Display in a Horizontal Row
Angular 5 Formgroup Reset Doesn't Reset Validators
How to Make an Editable Div Look Like a Text Field
Displaying Unicode Symbols in Html
Elongated Hexagon Shaped Button Using Only One Element
Extend Bootstrap Row Outside the Container
Youtube Autoplay Not Working on Mobile Devices With Embedded Html5 Player
Chrome Download Attribute Not Working
How to Have Two Fixed Width Columns With One Flexible Column in the Center
What Is the Functionality of !Doctype
Common Header/Footer With Static Html
How to Prevent Scrollbar from Repositioning Web Page
Css Set Background-Image by Data-Image Attr
Why Top Margin of HTML Element Is Ignored After Floated Element