CSS过渡属性应该放在哪里?

Question

当为元素创建CSS过渡时，应该将transition属性应用于元素的现有类(或id或选择器)还是应用于导致过渡的新类?我相信这两种方法都有效，但是哪一种方法比另一种好，为什么?

JSFiddle

.box {
    height: 100px;
    width: 100px;
    background: blue;
}
/* background-change class to be added to the element with the box class */
.background-change {
    background: red;
    /* Should this be under .background-change or .box? */
    transition: background 2s;
}

Answer 1

您可以同时使用这两种变体，它们都是可以的。但是你应该了解它们之间的区别。

如果您将transition属性设置为new/separate class，则仅当您设置该类时才会应用转换:

JSFiddle

$('.box').hover(function() {
    $(this).toggleClass('background-change');
});

.box {
    height: 200px;
    width: 200px;
    background: green;
}
.background-change {
    background: red;
    transition: background 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box">Hover it to change background</div>

但是如果你设置transition属性为主/现有类，你的过渡也将适用于当你删除类:

JSFiddle

$('.box').hover(function() {
    $(this).toggleClass('background-change');
});

.box {
    height: 200px;
    width: 200px;
    background: green;
    transition: background 2s;
}
.background-change {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box">Hover it to change background</div>

我更喜欢使用最后一个变体，因为它看起来更好，更一致。

Answer 2

应该是这样的:

.box {
  height: 100px;
  width: 100px;
  background: blue;
  transition: background 2s; 
}
.background-change {
  background: red;     
}

Answer 3

应应用于原始类。最终结果(在本例中为背景值)应应用于新类。

transition属性不初始化转换，它只是告诉元素，任何差异都会有这个转换。

我推荐这篇文章进行更深入的阅读:http://alistapart.com/article/understanding-css3-transitions