CSS transition with visibility not working
This is not a bug- you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).
This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.
visibility
in this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).
opacity
is a value setting (0-1), so keyframes can be calculated across the duration provided.
A list of transitionable (animatable) properties can be found here
CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)
I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.
This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.
var element = document.querySelector(".element")var toggle = document.querySelector(".element-toggle")
toggle.addEventListener("click", function(event) { element.classList.toggle("active");});
.element{ opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease;}
.element.active{ opacity: 1; visibility: visible;}
<div class="element">This is a div element</div>
<button type="button" class="element-toggle">Toggle</button>
CSS Transition Visibility Not Working for drop down menu
The transition effect will only affect the visibility
property if that is the property that changes between the regular and hover state. Right now you are trying to animate visibility
but you are showing/hiding the element with display: none
. Instead of using display
, change the visibility
value.
This should work:
.nav ul {
position: absolute;
margin: 0;
list-style: none;
visibility: hidden;
}
.nav li:hover > ul {
visibility: visible;
}
CSS transform transition backface-visibility not working
Here's the updated code.
Chrome has a weird bug when rotating elements, so backface-visibility
was needed after all, just not on the .card
itself.
$(document).ready(function(){ $(".card").click(function(){ $(this).toggleClass("turned"); $(this).toggleClass("unturned"); });});
body{ background-color:#5AEDBC; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow:hidden;}
.card:after{ box-sizing:border-box; backface-visibility:hidden; display:block; content:''; width:200px; height:400px; left:380px; position:absolute; background: cadetblue; transform:rotateZ(-40deg); backface-visibility:hidden;}
.card{ padding:20px 50px; overflow:hidden; position:absolute; width:350px; height:120px; display: flex; justify-content: center; align-items:center; flex-direction: row; background-color:white; font-family:'Raleway', sans-serif; border:5px solid rgba(0,100,100, 0.75); color:#008A45; margin-top:100px; transition:all 1s ease; transform-origin:0 100%; transform-style: preserve-3d;}
.cardBack { width:100%; height:100%; position:absolute; top: 0; left: 0; background-color:white; z-index:101;}
.card.unturned .cardBack{ opacity: 0; transition: opacity 0.25s ease 0.25s;}.card.turned .cardBack{ opacity: 1; transition: opacity 0s ease 0.15s;}/* this is needed for chrome */.card > * { backface-visibility: hidden;}/* */.card.turned{ transition:all 1s cubic-bezier(.17,.67,.59,1.35); transform:rotateX(-180deg);}
.info{ display: flex; justify-content: center; flex-direction: column; text-align:right; backface-visibility:hidden;}
.title{ font-size:26px; font-weight:bold italic; color:black; padding:5px 0; display:block;}
.desc{ font-size:18px; color:#ccc; padding:5px 0; display:block;}
.img{ border-radius: 50%; width: 90px; height: 90px; margin-left:20px; backface-visibility:hidden; z-index:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/><div class="card unturned"> <div class="cardBack"></div> <div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div><div class="card unturned"> <div class="cardBack"></div> <div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div><div class="card unturned"> <div class="cardBack"></div> <div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/></div>
CSS delayed visibility transition doesn't trigger JavaScript transitionend event for visibility?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event:
If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
transition: visibility 0s ease-in-out 3s
Your transition-duration for visibility is 0s
here.
Make that .0001s
, and you'll see the transitionend event for visibility fire as well.
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>
Edge 40/15 opacity/visibility transition event propagation (flickering) bug?
Your transition-delay:0s
is causing the problems. Setting it to a very low value should give you a good result: transition-delay: 0.01s
Here's your working codepen.
Related Topics
What Does an Asterisk Do in a CSS Property Name
How to Make React CSS Import Component-Scoped
How to Animate Handwriting Text on the Web Page Using Svg
Applying CSS Styles Only to Certain Elements
How to Create an Angled Corner in Css
How to Validate Vendor Prefixes in CSS Like -Webkit- and -Moz-
How to Set Up Fixed Width For ≪Td≫
In CSS Difference Between "." and "#" When Declaring a Set of Styles
Does Element Width Include Padding
Css: Center Element Within a ≪Div≫ Element
Defining Variable Variables Using Less CSS
Differencebetween Pipe (|) and Caret (^) Attribute Selectors
How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS
Freeze Screen in Chrome Debugger/Devtools Panel For Popover Inspection
What Is Difference Between Justify-Self, Justify-Items and Justify-Content in CSS Grid