显示/隐藏 - 悬停 - CSS - 动画

Question

尝试向使用 CSS 制作的显示/隐藏添加动画。但不确定是否可能，也许我应该用 JS 来代替？

该段落在悬停 div 时显示，但这没有像我想要的那样流畅的动画。是主要寻找它下降或什么的。

但是，基本的工作。如果你看一看并决定是否应该用 JS 制作它会很高兴。以及如何装箱。

HTML

<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Logo</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2 >Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>

CSS

.hover-to-show { 
    display: none;
    transition: all .2s ease-in-out;
}

.hover-to-show-link:hover .hover-to-show {
    display:block;
    transition: all .2s ease-in-out;
}

Answer 1

正如@Paran0a 所说，不能对显示属性进行动画处理，您可以为高度或不透明度设置动画，以使过渡起作用。

.hover-to-show { 
    opacity: 0;
    transition: all .2s ease-in-out;
}

.hover-to-show-link:hover .hover-to-show {
    opacity: 1;
    transition: all .2s ease-in-out;
}

<div class="hover-to-show-link">
    <a href="#">
        <h2>Logo</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2 >Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>