为什么我的 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 {

  50% {

    transform: scale(0.97);

  }

  100% {

    opacity: 0;

    transform: scale(0.90);

    display: none;

  }

}

[isopen="false"] {

  display: block;

  animation: hide .3s forwards;

}

代码片段：

$("#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);

    display: none;

  }

}

[isopen="true"] {

  display: block;

  -webkit-animation: show .3s;

  -moz-animation: show .3s;

  -ms-animation: show .3s;

  animation: show .3s;

}

[isopen="false"] {

  display: block;

  -webkit-animation: hide .3s forwards;

  -moz-animation: hide .3s forwards;

  -ms-animation: hide .3s forwards;

  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() {

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

});

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

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

});

.parent {

  display: none; 

  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"] {

  display: block;

  -webkit-animation: hide .3s forwards;

  -moz-animation: hide .3s forwards;

  -ms-animation: hide .3s forwards;

  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() {

  $('.parent').addClass('show');

});

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

  $('.parent').removeClass('show');

});

.parent {

   width: 40px;

  height: 40px;background: blue;

  transform: scale(0.97);

  transition: all 0.3s;

  opacity:0;

  

}

.show {

  opacity:1;

  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>