Question

我在div中有一个图标，我希望在x时间内淡入淡出，然后更快地淡出。

我想要达到的目标是：transition: opacity 1s ease-in .1s ease-out;

因此，当我将鼠标悬停在project上时，bottom-icons应仅ease-in opacity至1，但在转机时，它应返回{{1}瞬间。

我拥有的是：

opacity: 0

我试图避免使用jQuery。

Answer 1

您可以在悬停时应用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/

Answer 2

可以很容易地完成。

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

（很抱歉，代码在纯CSS中，但我觉得它更通用。）

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

Answer 3

.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>

Answer 4

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

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>

为相同的CSS属性应用单独的转换时序

4 个答案: