从具有相同属性的 css 转换中排除元素答案

【问题标题】：Exclude an element from css transition with the same property从具有相同属性的 css 转换中排除元素
【发布时间】：2020-06-15 18:31:20
【问题描述】：

我想从组内的过渡效果中排除一个元素。下面是代码：

HTML

<div class="container">
  <div class="item1"/>
  <div class="item2"/>
  <div class="item3"/>
  <div class="exclude"/>
</div>

CSS

.container {
  some-property: someValue;
  some-property: someValue;
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active {
  opacity: 0.2;
}

【问题讨论】：

你的问题我不清楚，但你需要这样的东西吗？ .container .exclude{transition:none}

标签： html css css-selectors css-transitions

【解决方案1】：

您的过渡被应用于父元素，在本例中为.container，因此无法移除对子元素的效果。

你需要做的是，直接将效果应用到孩子身上，跳过你想要避免的那个。

如果您想在用户单击父级时对子级应用过渡效果，请使用以下内容：

div {
  padding: 15px;
  border: 1px solid #222;
}

.container {
  display: grid;
  border-color: #999;
  grid-template: 1fr 1fr/1fr 1fr;
  grid-gap: 15px;
}

.container .exclude {
  background-color: #999;
  border-color: #999;
}

.container div:not(.exclude) {
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active div:not(.exclude) {
  opacity: 0.2;
}

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="exclude"></div>
</div>

【讨论】：

【解决方案2】：

使用:not()选择器函数：

.container > *:not(.exclude) {
    transition: opacity etc...
}

或者清除.excludeby using a selector with a higher specificity的transition属性：

.container > * {
    transition: etc
}

.container > .exclude {
    transition: none;
}

或者只使用!important（您应该始终避免使用）：

.container {
    transition: etc
}

.container > .exclude {
    transition: none !important;
}

【讨论】：