css - 不透明度过渡在两个方向上都不起作用

Question

我希望它在进入 和 离开暗淡状态时转换，但它只在离开时转换。输入时如何使转换工作？我还尝试了 ease-in 和 ease-out 但这些似乎没有什么区别。

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
    opacity: .5;
    transition: opacity .5s ease-in-out;
}

问题的实例http://codepen.io/ryanve/pen/doKdgW

Answer 1

因为你需要在.card上定义transition:

.card {
  transition: opacity .5s ease-in-out;
}

代替:

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
  transition: opacity .5s ease-in-out;
}