FadeOut 元素以 FadeIn 另一个在同一个地方与 CSS 动画

Question

所以我得到了一个带有图标的小圆圈，当我单击它时，它会使图标消失并在另一个 div 中显示一些元素。圆形通过 CSS 动画转换为 260x260 像素的正方形。

直到我没事，但我无法使淡入/淡出工作。有没有办法通过在父元素上切换 CSS 类来处理这个问题？

我不能只使用 opacity 0 到 opacity 1，因为我需要图标真正消失且不显示任何内容。回到圆圈+图标状态时，另一个相同。但我什至无法使不透明动画工作。我也尝试过使用 fadeIn 和 fadeOut 的关键帧，但也没有用。

我找到了这个fiddle，但它看起来很丑，不得不使用 setTimeout。

有没有办法只用 CSS 来解决这个问题？

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
});

.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  display: none;
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes opacity-down {
  0% {
  	visibility: visible;
    opacity: 1;
  }
  100% {
  	opacity: 0;
  	visibility: hidden;
  }
}

@keyframes opacity-up {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
  	opacity: 1;
  	visibility: visible;
  }
}

/*
@-webkit-keyframes fadeIn { 
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@keyframes fadeIn {
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@-webkit-keyframes fadeOut { 
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none; }
}

@keyframes fadeOut {
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none;  }
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>

Answer 1

直到我没事，但我无法使淡入/淡出工作。是 有一种方法可以通过在父级上切换 CSS 类来处理这个问题 元素？

你可以在没有动画的情况下使用切换类来做到这一点

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
  $('.children-2').toggleClass('show1');
  $('.children-1').toggleClass('show2');
});

.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  opacity: 0;
  transition: opacity 1s;
}

.children-1 {
  opacity: 1;
  transition: opacity 1s;
}

.show1 {
  opacity: 1;
}

.show2 {
  opacity: 1;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>