Css 从不透明度 0 到 1 回到 0

Question

我有一个 div 元素，我最初将其不透明度保持为零“0”。在某些事件中，我添加了一个 class，过渡时间为 0.3 秒，不透明度为“1”。但是我希望过渡到立即结束（当删除 class 时设置 0 不透明度而不进行过渡）。

div{
   opacity: 0;
   transition: opacity 0.3s ease-in;
}
div:hover{
   opacity: 1;
}

只尝试了 ease-in 和 cubic-bezier()，但不知何故我做不到。

Answer 1

尝试

div {   
  height:150px; width:150px; background:red;
  opacity: 0;
}

div:hover {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

Put cursor below
<div></div>

Answer 2

只需将您的过渡移动到 'hover' 状态。

    div{
       opacity: .5;
    }
    div:hover{
       opacity: 1;
       transition: opacity 0.3s ease-in;
    }

<div>hello world!</div>

Css transition from opacity 0 to 1 back to 0