When I hover this button the slide down transition is working, but when I remove the hover, the element just disappears, without the animation reverting.
The transition
property is on the element itself, and not on the :hover
pseudo element, so I don't really see what the issue could be here.
Codepen: https://codepen.io/pilfton/pen/wvPrQjX
HTML
<div >
<button >
Button
</button>
<ul >
<li>testing</li>
</ul>
</div>
SCSS
.availability-container {
overflow: hidden;
.availability-button {
display: flex;
align-items: center;
background-color: #ffe1e1;
padding: 5px 10px;
border-radius: 5px;
}
ul.availability-content {
padding: 0;
list-style-type: none;
visibility: hidden;
transform: translateY(-20px);
transition: transform .2s ease-in-out;
opacity: 0;
}
&:hover .availability-content {
visibility: visible;
opacity: 1;
transform: translateY(0%);
}
}
CodePudding user response:
The problem is very simple. So, no worries :)
You implement transition only for transform.
transition: transform .2s ease-in-out;
Change this like this.
transition: all .2s ease-in-out;
or transition: transform .2s ease-in-out, opacity .2s ease-in-out;
.
So you can see both transform and opacity animating.
You can test it here => https://codepen.io/cooskun/pen/yLPzQwm
Happy coding!