当父级从display:none切换为block时，停止播放动画 [英] Stop animation from replaying when parent switches from display:none to block

问题描述

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

I have a set of tabs that each contain a child element that animates. What happens when I click each tab is that the animation of the child element within the tab runs. I do not want it to run. I want the animation to run the first time then not replay when it's parent switch from display:none to display:block.

在下面的示例中，我有2个父div，每个div都有一个子div，这些子div的动画效果向右移动.当每个父级都设置为阻止动画重播时，我不希望这种情况发生.我希望每个孩子都保持在右边的位置.我该如何实现?

In the example I made below I have 2 parent divs, each with a child div that animates over to the right. When each parent is set to block the animation replays, I do not want that to happen. I want each child to stay positioned over to the right. How can I make that happen?

$(".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>

小提琴演示

推荐答案

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

Yes, animations will restart every time the display value is changed from none to something else.

根据 W3C规范 :(重点是我的)

As per W3C Spec: (emphasis is mine)

将display属性设置为"none"将终止应用于该元素及其后代的所有运行动画. 如果元素的显示为"none"，则将显示更新为"none"以外的值，将通过"animation-name"属性启动应用于该元素的所有动画. >，以及应用于显示"none"以外的子孙的所有动画.

Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.

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

There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none.

以下是有关在没有display: none的情况下如何隐藏元素的一些建议.不必仅使用以下变通办法之一，只要不涉及更改元素的display属性，也可以使用其他方法.

Following are a few suggestions on how the element could be hidden without display: none. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display property of the element.

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

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

.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;
  }
}

<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>

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

Adding a container, using position: absolute and opacity: 0 to hide the element.

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

.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;
  }
}

<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>

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

Adding a container, using position: absolute and visibility: hidden to hide the element.

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

.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;
  }
}

<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>

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

Adding a container, using position: absolute and z-index to hide the element.

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

.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;
  }
}

<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>

这篇关于当父级从display:none切换为block时，停止播放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！