css - 使转换仅以一种方式工作

Question

我在 css 中有以下代码:

.item {
    opacity: 0;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
}

.item.seen {
    opacity: 1;
}

当我将类 seen 添加到 .item 时，元素的 opacity 从 0 变为 1 并进行转换。

但是当我从 .item 中删除类 seen 时，opacity 转换(从 1 到 0)也会运行。

有什么方法可以在添加 .seen 而在移除时不运行转换？

Answer 1

.item {
    opacity: 0;
}

.item.seen {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

fiddle :http://jsfiddle.net/qcxt3evn/ (将 opacity 设置为 0.2 只是为了看到可点击的元素)

此外，不要忘记将标准属性放在供应商前缀之后(后者可能不符合规范)