javascript - CSS Transition 在样式更改的相反方向上不起作用？

Question

我在一段上使用过渡，当有人将鼠标悬停在 h1 上时，我会慢慢地让它可见。我成功地做到了这一点，但过渡只能以一种方式进行。当我的指针离开字段时，该段落突然消失了。我不希望我希望它转换回隐藏状态。

HTML:

<div class="row11">
  <h1 id="html" class="h11">HTML5</h1>
  <p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>

CSS:

.row11{
    width: 100%;
    height: 50vh;
    background: url("../images/html.jpeg") no-repeat center center fixed;
    font-family: 'Julius Sans One', sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;

}

#html{
    color: #fff;
    padding: 10px;
    background-color: #000;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5px;
}

#html1{
    color: white;
    background-color: rgba(182,60,56,0.9);
    padding: 5%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 2s ease-out;
    -moz-transition: visibility 0s, opacity 2s ease-out;
    -o-transition: visibility 0s, opacity 2s ease-out;
    transition: visibility 0s, opacity 2s ease-out;
}

JS:

var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
headhtml[0].addEventListener('mouseover' , () => {
    parahtml[0].style.visibility = "visible" ;
    parahtml[0].style.opacity = "1" ;
});

parahtml[0].addEventListener('mouseout' , () => {
    parahtml[0].style.visibility = "hidden" ;
    parahtml[0].style.opacity = "0" ;
});

Answer 1

尝试在 mouseout 上设置 transition:

parahtml[0].style.transition = "all 2s ease-out"

var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
headhtml[0].addEventListener('mouseover' , () => {
    parahtml[0].style.visibility = "visible" ;
    parahtml[0].style.opacity = "1" ;
});

parahtml[0].addEventListener('mouseout' , () => {
    parahtml[0].style.visibility = "hidden" ;
    parahtml[0].style.opacity = "0" ;
    parahtml[0].style.transition = "all 2s ease-out";
});

.row11{
    width: 100%;
    height: 50vh;
    background: url("../images/html.jpeg") no-repeat center center fixed;
    font-family: 'Julius Sans One', sans-serif;
    display:flex;
    align-items: center;
    justify-content: center;

}

#html{
    color: #fff;
    padding: 10px;
    background-color: #000;
    width: 40%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5px;
}

#html1{
    color: white;
    background-color: rgba(182,60,56,0.9);
    padding: 5%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 2s ease-out;
    -moz-transition: visibility 0s, opacity 2s ease-out;
    -o-transition: visibility 0s, opacity 2s ease-out;
    transition: visibility 0s, opacity 2s ease-out;
}

<div class="row11">
  <h1 id="html" class="h11">HTML5</h1>
  <p id="html1" class="p1"> I have strong understanding of HTML5 which makes my base strong. I have been working with HTML from the last 12 Years</p>
</div>