Question

我有一组标签，每个标签都包含一个动画的子元素。单击每个选项卡时会发生的情况是选项卡中子元素的动画运行。我不希望它运行。我希望动画第一次运行，然后在父级从display:none切换到display:block时不重播。

在我下面的例子中，我有2个父div，每个div都有一个子div，在右边动画。当每个父级都设置为阻止动画重放时，我不希望发生这种情况。我希望每个孩子都能保持在右侧。我怎样才能做到这一点？

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

.parent {
  display: none;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
  display: block;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class="parent active">
  <div class="child red"></div>
</div>

<div class="parent">
  <div class="child blue"></div>
</div>

Fiddle Demo

Answer 1

是的，每次display值从none更改为其他内容时，动画都会重新启动。

根据W3C Spec :(重点是我的）

将display属性设置为'none'将终止应用于该元素及其后代的任何正在运行的动画。 如果元素的显示为“none”，则将显示更新为“none”以外的值将启动“animation-name”属性 应用于元素的所有动画>，以及应用于显示除“无”之外的后代的所有动画。

没有直接的方法可以防止这种情况发生，因为是预期的行为。您可以使用其他方法隐藏元素而不是使用display: none来解决问题。

以下是关于如何在没有display: none的情况下隐藏元素的一些建议。并非强制要求只使用以下变通办法之一，只要它不涉及更改元素的display属性，它也可能是其他方式。

使用height: 0，width: 0，overflow: hidden隐藏元素。

＆＃13;

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

＆＃13;

.parent {
  height: 0;
  width: 0;
  overflow: hidden;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
  height: auto;
  width: auto;
  overflow: visible;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class="parent active">
  <div class="child red"></div>
</div>

<div class="parent">
  <div class="child blue"></div>
</div>

＆＃13;

使用position: absolute和opacity: 0添加容器以隐藏元素。

＆＃13;

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

＆＃13;

.container {
  position: relative;
}
.parent {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
  opacity: 1;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class='container'>
  <div class="parent active">
    <div class="child red"></div>
  </div>

  <div class="parent">
    <div class="child blue"></div>
  </div>
</div>

＆＃13;

使用position: absolute和visibility: hidden添加容器以隐藏元素。

＆＃13;

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

＆＃13;

.container {
  position: relative;
}
.parent {
  position: absolute;
  visibility: hidden;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
  visibility: visible;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class='container'>
  <div class="parent active">
    <div class="child red"></div>
  </div>

  <div class="parent">
    <div class="child blue"></div>
  </div>
</div>

＆＃13;

使用position: absolute和z-index添加容器以隐藏元素。

＆＃13;

$(".toggler").on("click", function() {
  $(".parent").toggleClass("active");
});

＆＃13;

.container {
  position: relative;
}
.parent {
  position: absolute;
  z-index: -1;
  cursor: pointer;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
  z-index: 1;
}
.child.red {
  background-color: red;
}
.child.blue {
  background-color: blue;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 180px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>

<div class='container'>
  <div class="parent active">
    <div class="child red"></div>
  </div>

  <div class="parent">
    <div class="child blue"></div>
  </div>
</div>

＆＃13;

当父级从display：none切换到阻止时，停止动画重播

1 个答案: