对同一CSS属性应用单独的转换时间

我在div中有一个图标，我想在x时间内淡出，淡出速度更快。

我试图实现的是：transition: opacity 1s ease-in .1s ease-out;

因此，当我悬停在project上时，bottom-icons应该只ease-in——opacity到1，但在悬停时，它应该立即返回到opacity: 0。

我拥有的是：

.project {
  position: relative;
  &:hover {
    .bottom-icons  {
      opacity: 1 !important;
    }
  }
  .bottom-icons {
    transition: opacity .5s ease-in;
    //other stuff
    }

我试图避免jQuery。

您可以在悬停时应用transition，如下所示：

.project {
  position: relative;
  &:hover {
    .bottom-icons  {
      transition: opacity 1s ease-in;
      opacity: 1 !important;
    }
  }
  .bottom-icons {
    transition: opacity .1s ease-out;
    //other stuff
    }

https://jsfiddle.net/8x184o6x/

这可以很容易地完成。

.project .bottom-icons {
    transition: opacity 0.5s ease-out; /* leaving effect */
}
.project:hover .bottom-icons {
    transition: opacity 1s ease-out; /* entering effect */
}

(很抱歉，代码是纯CSS，但我发现它更通用。(

正常状态和:hover状态的转换可能不同，这就是我们在这里使用的。

.project {
  position: relative;
  &:hover {
    .bottom-icons  {
      opacity: 1 !important;
     transition: opacity .5s ease-out;
    }
  }
  .bottom-icons {
    transition: opacity 2s ease-out;
    //other stuff
    }

只需将图标设置为轻松脱离正常状态，并以不同的方式轻松脱离悬停状态。

.project {
      position: relative;
background: #eee;
  text-align: center;
padding: 30px;}
     
 .bottom-icons  {
       display: block;
       background: #ddd;
   padding: 5px;
          opacity: 1 ;
         transition: opacity .5s ease-out;
        }
   .project:hover .bottom-icons {
        opacity: 0;
        transition: opacity 2s ease-out;
        }

<div class="project">
  
 <div class="bottom-icons">
   xxxxx
   </div>
  
  
  </div>

根据您的解释，您可以使用以下内容：

ADD transition to the hover,

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    opacity : 1;
    -moz-transition: opacity .25s ease-in-out;
}
div:hover {
   opacity: .1;
   -moz-transition:2s;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>
</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

相关内容

最新更新

热门标签：