CSS过渡在样式改变的相反方向上不起作用？

Question

CSS过渡在样式改变的相反方向上不起作用？

3

我正在使用过渡效果在段落上，当鼠标悬停在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" ;
});

- Rocking Education

3个回答

2

首先，您可以使用仅CSS来简化此过程，考虑使用+选择器。然后，您可以调整悬停和正常状态下的转换。在正常状态下添加一个延迟，等于不透明度动画的持续时间，并保持悬停状态下的初始状态：

.row11 {
  width: 100%;
  height: 50vh;
  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: red;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s ease-out;
}

#html:hover + #html1 {
  opacity: 1;
  visibility: visible;
  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>

- Temani Afif

我真的很惊讶这个能够工作。visibility不是一个可以过渡的值，但显然你仍然可以延迟这样的值。我怎么不知道呢？ - Niet the Dark Absol

实际上，这只是代码的一部分，我必须使用JS，那么有没有一种方法可以在不使用:hover的情况下实现这个？ - Rocking Education

@RockingEducation，我非常确定你不必使用JS来完成这件事;) 但是如果你确实需要JS来完成这个任务...只需在JS代码中添加过渡效果，就像你在不透明度和可见性方面所做的那样。 - Temani Afif

@NiettheDarkAbsol，诀窍就在这里：），可根据列表（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties）动画化可见性，即使我们不能像不透明度一样进行动画化。而且，由于它在此列表中，延迟也适用于它;) - Temani Afif

0

你的可见性转换是0s，所以你需要在鼠标移出后2秒钟将可见性设置为hidden（这就是过渡持续的时间），使用setTimeout。

.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-in-out;
    -moz-transition: visibility 0s, opacity 2s ease-in-out;
    -o-transition: visibility 0s, opacity 2s ease-in-out;
    transition: visibility 0s, opacity 2s ease-in-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 for the last 12 Years</p>
</div>
<script>
var headhtml = document.getElementsByClassName("h11");
var parahtml = document.getElementsByClassName("p1");
var intvl;
headhtml[0].addEventListener('mouseover' , () => {
    if(intvl){
      clearTimeout(intvl);
      intvl = null;
    }
    parahtml[0].style.visibility = "visible" ;
    parahtml[0].style.opacity = "1" ;
});

parahtml[0].addEventListener('mouseout' , () => {
    parahtml[0].style.opacity = "0" ;
    intvl = setTimeout(function(){
      parahtml[0].style.visibility = "hidden" ;  
    }, 2000);
});
</script>

- Unmitigated

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mamun · Accepted Answer

尝试在鼠标移出时设置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>