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

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

把你css改成这样：

.is-dimmed-unless-active {
  transition: opacity .5s ease-in-out;
  opacity: 1;
}
.is-dimmed-unless-active:hover {
    opacity: .5;
}

.card {
  width: 60%;
  margin: 1em auto;
  padding: 1em;
  color: crimson;
  border: 3px dotted crimson;
}

body {
  font-family: sans-serif;
  background: white;
}

Answer 2

因为你需要在.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;
}