禁用子元素的继承属性的顺序转换

Question

看看这个例子：

http://jsbin.com/teqifogime/edit?html,css,output

在第一个区块中，文本颜色随着背景颜色的转换而变化，因为它从父级继承它。

第二个块中的文本颜色仅在其父元素完成转换后才会转换。

当把一些使用大量转换的东西组合在一起时，这可能会令人沮丧，而且看起来像是意想不到的行为。有什么方法吗？

HTML

  <div class="block block-one">
    <h2>Color Test</h2>
  </div>
  <div class="block block-two">
    <h2>Color Again</h2>
  </div>

CSS

.block {
  width: 200px;
  margin: 20px auto;
  background-color: pink;
  text-align: center;
  padding: 10px;
  transition: 1s;
}

h2 {
  transition: 1s;
}

.block-one:hover {
  background-color: wheat;
}

.block-one:hover h2 {
  color: azure;
}

.block-two:hover {
  color: azure;
  background-color: wheat;
}

修改的

为了清楚起见：在我的真实场景中，我有一堆CSS组件具有自己的过渡属性，其中一些最终以这种奇怪的方式“链接”。我最终需要制定一堆特定的规则＆amp;获得我认为应该是默认行为的异常。也许我的问题更多的是关于CSS的本质 - 如果有一些原因可以解决事情的原因

Answer 1

有点不清楚你在问什么，但我认为从transition的{​​{1}}删除.block-two应该可以解决问题。

你有一些选择：

第一

h2

第二

.block-one h2 {
  transition: 1s;
}

第三

.block-two h2 {
  transition: 0s;
}

第四

.block-two-title {
  transition: 0s;
}

这是第二一个：

.block-title--transition {
  transition: 1s;
}

.block {
  width: 200px;
  margin: 20px auto;
  background-color: pink;
  text-align: center;
  padding: 10px;
  transition: 1s;
}

h2 {
  transition: 1s;
}

.block-one:hover {
  background-color: wheat;
}

.block-one:hover h2 {
  color: azure;
}

.block-two:hover {
  color: azure;
  background-color: wheat;
}

.block-two h2 {
  transition: 0s;
}