从不透明度 0 到 1 回到 0 的 Css 过渡

Question

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

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

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

Answer 1

只需将您的过渡移动到“悬停”状态即可。

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

<div>hello world!</div>