HTML

Question

HTML

<div class="parent">
    <img class='child' src="https://picsum.photos/200/400?random=1" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=2" alt="">
    <img class='child special-child' src="https://picsum.photos/200/400?random=3" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=4" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=5" alt="">
</div>

CSS

.parent {
    transition: transform 250ms ease-in;
}

因此，现在所有子类都具有用于转换的过渡效果，但是对于特殊子类（每次都会是不同的图像，并且将使用JS而不是CSS进行选择，我只是将类放在html中进行解释）我想让转场不同地工作，我想在其上进行2-3个转场，总共要占用其他人250毫秒的时间，我想在其他人移动的同时进行（我想所有转换都同时发生），所有这些都可以通过点击事件监听器来调用。

问题是我不能覆盖父对象上的转换，因为它需要另一个孩子的转换，并且如果我向子对象添加转换属性，它什么也不做（因为在那儿可以转换子对象上的转换）。 / p>

那我怎样才能给'特殊孩子'我想要的过渡属性？

谢谢

Answer 1

您可以在所有.parent元素中直接应用所需的过渡，而无需在.child中设置过渡规则（以便其子级继承它），除外 ”之一：

.child:not(.special-child) { ... }

然后，为该元素制定正确的规则。

document.getElementById('transform').addEventListener('click', function() {
  var children = document.querySelectorAll('.child');
  children.forEach(function(child) {
    child.classList.add('transformed');
  });
});

.child:not(.special-child) {
  transition: transform 2s;
}
.transformed:not(.special-child) {
  transform: rotate(90deg);
}

.special-child {
  transition: width 0.5s, height 0.5s 0.5s, transform 1s 1s;
  width: 100px;
  height: 100px;
}
.special-child.transformed {
  width: 150px;
  height: 150px;
  transform: rotate(90deg);
}

<div class="parent">
  <img class='child' src="https://picsum.photos/100/100?random=1" alt="">
  <img class='child special-child' src="https://picsum.photos/100/100?random=2" alt="">
  <img class='child' src="https://picsum.photos/100/100?random=3" alt="">
</div>

<button id="transform">Click me!</button>

Answer 2

在.child上设置转换

.child {
  transition: transform 2s;
}
.child.transformed {
  transform: rotate(90deg);
}

.special-child {
  transition: width 0.5s, height 0.5s, transform 1s;
  width: 100px;
  height: 100px;
}
.special-child.transformed {
  width: 150px;
  height: 150px;
  transform: translateY(200px);
}

<div class="parent">
  <img class='child' src="https://picsum.photos/100/100?random=1" alt="">
  <img class='child special-child' src="https://picsum.photos/100/100?random=2" alt="">
  <img class='child' src="https://picsum.photos/100/100?random=3" alt="">
</div>

CSS / JS-如何覆盖一个孩子而不是其他孩子的父母过渡

HTML

CSS

2 个答案: