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

Posted 2023-03-06

【中文标题】不透明度过渡在两个方向上都不起作用

【英文标题】：Opacity transition not working in both directions

【发布时间】：2015-10-03 17:43:49

【问题描述】：

我希望在进入 和 时会转换为暗状态，但它只会在离开时转换。输入时如何使过渡工作？我也尝试过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的现场示例

【参考方案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;

【参考方案2】：

把你的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;