我应该在哪个元素上应用过渡？

Question

我正在创建一个项目，其中我需要显示一个主题的标题，当鼠标经过它时，它会更改为该标题的信息。我已经设法让它工作，但我不希望它立即改变，我想在它上应用过渡，使它更令人愉悦。问题是我不知道该把它放在哪个元素上。我试着把它放在所有三个上面，但都不起作用。如果有人帮我的话我会很感激的。下面是我的代码：

HTML

<div class="sop-container">
           <div class="sop-body"  onmouseover="showSop()" onmouseout="hideSop()">
               <h1 id="sop-head">Lorem Ipsum</h1>
               <p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
           </div>
           <div class="sop-img">   
                <img src="masks.jpg" alt="">
           </div>
       </div>

CSS

.sop-body{
    flex: 1;
    background-color: #EAC435;
    transition: 3s ease;
    

}

.sop-body h1{
    text-align: center;
    margin-top:125px;
    transition: 3s ease-in-out;
}




.sop-body p{
    display: none;
    margin:5%;
    letter-spacing: 1px;
    font-size: large;
    margin-top: 80px ;
    transition: 3s ease-in-out;
}



.sop-img{
    flex: 1;
    overflow-y: hidden;
  
}

Javascript (以防万一)

var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")

function showSop(){
    sopBody.style.display = "block"
    sopHead.style.display = "none"

}

function hideSop(){
    sopBody.style.display = "none"
    sopHead.style.display = "block"
}

Answer 1

transition在display属性上不起作用。只需考虑一下如何呈现部分显示元素。你不能这么做。

或者，您也可以在此处使用opacity

​

var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")

function showSop() {
  sopBody.style.opacity = "1"
  sopHead.style.opacity = "0"
}

function hideSop() {
  sopBody.style.opacity = "0"
  sopHead.style.opacity = "1"
}

.sop-body {
  flex: 1;
  background-color: #EAC435;
}

.sop-body h1 {
  text-align: center;
  margin-top: 125px;
  transition: 1s ease-in-out;
}

.sop-body p {
  opacity: 0;
  margin: 5%;
  letter-spacing: 1px;
  font-size: large;
  margin-top: 80px;
  transition: 1s ease-in-out;
}

.sop-img {
  flex: 1;
  overflow-y: hidden;
}

<div class="sop-container">
  <div class="sop-body" onmouseover="showSop()" onmouseout="hideSop()">
    <h1 id="sop-head">Lorem Ipsum</h1>
    <p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
  </div>
  <div class="sop-img">
    <img src="masks.jpg" alt="">
  </div>
</div>

​