CSS从不透明度0到1过渡回0

Question

我有一个div元素，最初将其保持在零“ 0”不透明度。 在某些情况下，我添加了一个过渡为0.3s且不透明度为“ 1”的类。 但是我希望转换立即结束（设置为0，不透明度在删除类时不进行转换）。

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

仅尝试了缓入，也尝试了三次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

只需将您的过渡设置为“悬停”状态即可。

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

<div>hello world!</div>