html - CSS Transition 没有相应地工作

Question

不确定我在这里做错了什么。悬停肯定有效，因为顶部和底部属性发生了变化，但过渡不存在。

.info{
  position:absolute;
  transition: opacity 2s; 
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  background:rgba(0,0,0,0.8);
  color:white;
  text-align:center;
  justify-content:center;
  display:none;
  opacity:0; 
}


.content ul li:hover .info{
  top:-10px;
  bottom:10px;
  opacity:1;
  display:flex;
}

使用jade，这里是标记

div.content  
      ul 
       each item in results2
          li
            img(src='images/portfolio/#{item.image_path}')
            div.info
              span #{item.title}
                p #{item.description}

任何帮助将不胜感激:)

Answer 1

那是因为您指定了 display 属性 (display:none)。如果您删除 display:none 它应该可以正常工作。 display 属性无法转换。

尝试:

.info{
   position:absolute;
   transition: opacity 2s; 
   top:0;
   bottom:0;
   right:0;
   left:0;
   background:rgba(0,0,0,0.8);
   color:white;
   text-align:center;
   justify-content:center;
   opacity:0; 
}