为什么我的 div 仅在我添加 isopen=true 的属性时才动画

Question

当我单击一个按钮时，我希望我的 div 动画。似乎只有显示动画有效，但隐藏无效。即使属性值发生变化，隐藏动画也根本不起作用。

$("#divShow").click(function() {

  $('.parent').attr('isopen', 'true');

});

$("#divHide").click(function() {

  $('.parent').attr('isopen', 'false');

});

.parent {

  display: none; //hidden by default

  width: 40px;

  height: 40px;

  background: blue;

}

@keyframes show {

  50% {

    transform: scale(1.03);

  }

}

@keyframes hide {

  50% {

    transform: scale(0.97);

  }

  100% {

    opacity: 0;

    transform: scale(0.90);

  }

}

[isopen="true"] {

  display: block;

  -webkit-animation: show .3s;

  -moz-animation: show .3s;

  -ms-animation: show .3s;

  animation: show .3s;

}

[isopen="false"] {

  -webkit-animation: hide .3s;

  -moz-animation: hide .3s;

  -ms-animation: hide .3s;

  animation: hide .3s;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="divShow">Show</button>

<button id="divHide">Hide</button>

<div class="parent">

</div>

Answer 1

我想我已经按照你的意愿工作了。请参阅下面的代码片段。您的节目类有显示块，但是当您将其删除时，它会立即恢复为无。只需在隐藏动画的末尾添加 display none 即可。像这样：@keyframes hide {&nbsp; 50% {&nbsp; &nbsp; transform: scale(0.97);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: scale(0.90);&nbsp; &nbsp; display: none;&nbsp; }}[isopen="false"] {&nbsp; display: block;&nbsp; animation: hide .3s forwards;}代码片段：$("#divShow").click(function() {&nbsp; $('.parent').attr('isopen', 'true');});$("#divHide").click(function() {&nbsp; $('.parent').attr('isopen', 'false');});.parent {&nbsp; display: none; //hidden by default&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; background: blue;}@keyframes show {&nbsp; 50% {&nbsp; &nbsp; transform: scale(1.03);&nbsp; }}@keyframes hide {&nbsp; 50% {&nbsp; &nbsp; transform: scale(0.97);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: scale(0.90);&nbsp; &nbsp; display: none;&nbsp; }}[isopen="true"] {&nbsp; display: block;&nbsp; -webkit-animation: show .3s;&nbsp; -moz-animation: show .3s;&nbsp; -ms-animation: show .3s;&nbsp; animation: show .3s;}[isopen="false"] {&nbsp; display: block;&nbsp; -webkit-animation: hide .3s forwards;&nbsp; -moz-animation: hide .3s forwards;&nbsp; -ms-animation: hide .3s forwards;&nbsp; animation: hide .3s forwards;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="divShow">Show</button><button id="divHide">Hide</button><div class="parent"></div>

Answer 2

在这个答案的帮助下：https ://stackoverflow.com/a/15407098/2181514您可以添加forwards到动画中，以便它们保留最后 (100%) 关键帧。添加display:block以[isopen=false]确保它不会立即隐藏：animation: hide .3s forwards;更新片段：$("#divShow").click(function() {&nbsp; $('.parent').attr('isopen', 'true');});$("#divHide").click(function() {&nbsp; $('.parent').attr('isopen', 'false');});.parent {&nbsp; display: none;&nbsp;&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; background: blue;}@keyframes show {&nbsp; 50% {&nbsp; &nbsp; transform: scale(1.03);&nbsp; }}@keyframes hide {&nbsp; 50% {&nbsp; &nbsp; transform: scale(0.97);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: scale(0.90);&nbsp; }}[isopen="true"] {&nbsp; display: block;&nbsp; -webkit-animation: show .3s;&nbsp; -moz-animation: show .3s;&nbsp; -ms-animation: show .3s;&nbsp; animation: show .3s;}[isopen="false"] {&nbsp; display: block;&nbsp; -webkit-animation: hide .3s forwards;&nbsp; -moz-animation: hide .3s forwards;&nbsp; -ms-animation: hide .3s forwards;&nbsp; animation: hide .3s forwards;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="divShow">Show</button><button id="divHide">Hide</button><div class="parent"></div>

Answer 3

可以使用转换以更少的代码行简单、高效地完成$("#divShow").click(function() {&nbsp; $('.parent').addClass('show');});$("#divHide").click(function() {&nbsp; $('.parent').removeClass('show');});.parent {&nbsp; &nbsp;width: 40px;&nbsp; height: 40px;background: blue;&nbsp; transform: scale(0.97);&nbsp; transition: all 0.3s;&nbsp; opacity:0;&nbsp;&nbsp;}.show {&nbsp; opacity:1;&nbsp; transform: scale(1.03);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="divShow">Show</button><button id="divHide">Hide</button><div class="parent"></div>