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。

但是当我从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只是为了查看可点击的元素）

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

Answer 2

在这种情况下，包含transition的{{1}}永远不会更改。

如果您在transition中设置class进行切换，则转换在删除上无效。

.item {
    opacity: 0;
}

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

<强> DEMO

要超越，在 Chris Coyier 的文章Ordering CSS3 Properties中也有详细解释，您应该注意顺序你的前缀，附有文章的非常好的例子：

http://codepen.io/css-tricks/pen/pqgKH

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px;
}
#rightway { background: #ccc; padding: 30px; 
  -webkit-border-radius: 30px 10px;
  border-radius: 30px 10px;
}

css - 使转换仅适用于一种方式

2 个答案: