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到a时.item,opacity项目的转换从0变为1.

但是当我删除类seen从.item所述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;
}

小提琴:http://jsfiddle.net/qcxt3evn/(opacity设置为0.2仅用于查看可点击元素)

另外,不要忘记在供应商前缀后放置标准属性(后者可能不符合规范)