Dus*_*tin 6 css css-animations
我有一组选项卡，每个选项卡都包含一个动画子元素。当我单击每个选项卡时，会发生该选项卡内子元素的动画运行。我不想让它运行。我希望动画第一次运行，然后在父级从 切换display:none到时不再重播display:block。
在下面我制作的示例中，我有 2 个父 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>是的，每次将display值更改为none其他值时，动画都会重新启动。
根据W3C 规范：（重点是我的）
\n\n\n\n\n将显示属性设置为 \xe2\x80\x98none\xe2\x80\x99 将终止应用于该元素及其后代的任何正在运行的动画。如果元素的显示为 \xe2\x80\x98none\xe2\x80\x99，则将显示更新为 \xe2\x80\x98none\xe2\x80\x99 以外的值将启动由 \ 应用于该元素的所有动画。 xe2\x80\x98animation-name\xe2\x80\x99 property，以及应用于除 \xe2\x80\x98none\xe2\x80\x99 之外的后代的所有动画。
\n
没有直接的方法可以防止这种情况发生，因为这是预期的行为。您可以通过使用其他方法来隐藏元素而不是使用 来解决这种情况display: none。
以下是关于如何在没有display: none. 并不强制只使用以下解决方法之一，也可以使用其他方法，只要它不涉及更改display元素的属性即可。
使用height: 0, width: 0,overflow: hidden隐藏元素。
$(".toggler").on("click", function() {\r\n $(".parent").toggleClass("active");\r\n});.parent {\r\n height: 0;\r\n width: 0;\r\n overflow: hidden;\r\n cursor: pointer;\r\n}\r\n.child {\r\n width: 100px;\r\n height: 100px;\r\n background-color: red;\r\n position: relative;\r\n animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;\r\n}\r\n.active {\r\n height: auto;\r\n width: auto;\r\n overflow: visible;\r\n}\r\n.child.red {\r\n background-color: red;\r\n}\r\n.child.blue {\r\n background-color: blue;\r\n}\r\n@keyframes move {\r\n from {\r\n left: 0;\r\n }\r\n to {\r\n left: 180px;\r\n }\r\n}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<a class="toggler">Click this</a>\r\n\r\n<div class="parent active">\r\n <div class="child red"></div>\r\n</div>\r\n\r\n<div class="parent">\r\n <div class="child blue"></div>\r\n</div>添加容器，使用position: absolute和opacity: 0隐藏元素。
$(".toggler").on("click", function() {\r\n $(".parent").toggleClass("active");\r\n});.container {\r\n position: relative;\r\n}\r\n.parent {\r\n position: absolute;\r\n opacity: 0;\r\n cursor: pointer;\r\n}\r\n.child {\r\n width: 100px;\r\n height: 100px;\r\n background-color: red;\r\n position: relative;\r\n animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;\r\n}\r\n.active {\r\n opacity: 1;\r\n}\r\n.child.red {\r\n background-color: red;\r\n}\r\n.child.blue {\r\n background-color: blue;\r\n}\r\n@keyframes move {\r\n from {\r\n left: 0;\r\n }\r\n to {\r\n left: 180px;\r\n }\r\n}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<a class="toggler">Click this</a>\r\n\r\n<div class=\'container\'>\r\n <div class="parent active">\r\n <div class="child red"></div>\r\n </div>\r\n\r\n <div class="parent">\r\n <div class="child blue"></div>\r\n </div>\r\n</div>添加容器，使用position: absolute和visibility: hidden隐藏元素。
$(".toggler").on("click", function() {\r\n $(".parent").toggleClass("active");\r\n});.container {\r\n position: relative;\r\n}\r\n.parent {\r\n position: absolute;\r\n visibility: hidden;\r\n cursor: pointer;\r\n}\r\n.child {\r\n width: 100px;\r\n height: 100px;\r\n background-color: red;\r\n position: relative;\r\n animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;\r\n}\r\n.active {\r\n visibility: visible;\r\n}\r\n.child.red {\r\n background-color: red;\r\n}\r\n.child.blue {\r\n background-color: blue;\r\n}\r\n@keyframes move {\r\n from {\r\n left: 0;\r\n }\r\n to {\r\n left: 180px;\r\n }\r\n}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<a class="toggler">Click this</a>\r\n\r\n<div class=\'container\'>\r\n <div class="parent active">\r\n <div class="child red"></div>\r\n </div>\r\n\r\n <div class="parent">\r\n <div class="child blue"></div>\r\n </div>\r\n</div>添加容器，使用position: absolute和z-index隐藏元素。
$(".toggler").on("click", function() {\r\n $(".parent").toggleClass("active");\r\n});.container {\r\n position: relative;\r\n}\r\n.parent {\r\n position: absolute;\r\n z-index: -1;\r\n cursor: pointer;\r\n}\r\n.child {\r\n width: 100px;\r\n height: 100px;\r\n background-color: red;\r\n position: relative;\r\n animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;\r\n}\r\n.active {\r\n z-index: 1;\r\n}\r\n.child.red {\r\n background-color: red;\r\n}\r\n.child.blue {\r\n background-color: blue;\r\n}\r\n@keyframes move {\r\n from {\r\n left: 0;\r\n }\r\n to {\r\n left: 180px;\r\n }\r\n}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<a class="toggler">Click this</a>\r\n\r\n<div class=\'container\'>\r\n <div class="parent active">\r\n <div class="child red"></div>\r\n </div>\r\n\r\n <div class="parent">\r\n <div class="child blue"></div>\r\n </div>\r\n</div>