CSS 悬停时动画不反转

Question

当我悬停此按钮时，向下滑动过渡有效，但当我移除悬停时，元素就消失了，动画没有恢复。

transition 属性是在元素本身上，而不是在 :hover 伪元素上，所以我真的看不出问题出在哪里。

代码笔：https://codepen.io/pilfton/pen/wvPrQjX

HTML

<div class="availability-container">
  <button class="availability-button">
    Button
  </button>

  <ul class="availability-content">
    <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%);
    }
}

Answer 1

问题很简单。所以，不用担心:)

您仅为变换实现过渡。

transition: transform .2s ease-in-out;

改成这样。

transition: all .2s ease-in-out; 或 transition: transform .2s ease-in-out, opacity .2s ease-in-out;.

因此您可以看到变换和不透明度动画。

你可以在这里测试=> https://codepen.io/cooskun/pen/yLPzQwm

编码愉快！

CSS 悬停时动画不反转

CSS Animation not reversing on hover-out

html

css

transition

HTML

SCSS