Question

我试图显示或隐藏侧面板的标题，同时将其折叠到宽度：50％

我正在使用display：block来显示：none; 不知怎的，我无法在其上使用动画

以下是我正在使用的代码

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
}
@keyframes fade-in {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fade-out {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

知道为什么显示无法正常工作

Answer 1

＆＃13;

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
  background:black;
  height:200px;
  width:200px;
  margin-bottom:10px;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
  background:red;
  height:200px;
  width:200px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    display: none;
  }
  100% {
    opacity: 0;
  }
}

＆＃13;

<div class="fade-in"></div>
<div class="fade-out"></div>

＆＃13;

动画在Display上无效：阻止为无

1 个答案: