How to Apply a CSS Transition to the Overflow Property

Can I apply a CSS transition to the overflow property?

There are many properties that can't be transitioned. overflow is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none; and display: block; (for example): there are no in-between phases to use as transitions.

You can see a list of properties you can animate here on Mozilla Developer Network.

CSS transition not with overflow

"overflow" is not a animatable property.

Here is a list of animatable properties:

CSS animated properties

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>

CSS transition not working when use overflow?

Basically what an overflow:hidden is doing is just hiding the scrollbars.

Try editing the overflow with scroll and you'll see

overflow:scroll

However if you remove overflow:hidden, the element fillColor:after will be rendered as visible.

How to add a CSS transition when there are no changing properties?

Okay, So you want to set the height of .header to auto first of all. Then when you change it's contents get the height of .header using JQuery, so use var headerHeight = $('.header').outerHeight(); then set .headers height to that height, rather than auto using $('.header').css({'height': headerHeight}). But every time you add new content you have to set the height back to auto, in order to get the height of the new .header div with the new content in it.

Obviously you then want to add to .header the transition as follows or something similar: transition: height 0.25s ease-in-out;. I hope that helps. Let me know if I've misunderstood your question or if I can help further. : )

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:

  1. Consider using button instead of a tag. It's a button that does something when clicked as opposed to a hyperlink that directs to a link when clicked.
  2. 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.
  3. visibility as part of transition property as well. That is, something like transition: 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



Leave a reply



Submit