元素的FadeOut元素与CSS动画位于同一位置的另一个FadeIn元素。

Question

所以我得到了一个有图标的小圆形状，当我点击它时，它会使图标消失，并在另一个div中显示一些元素。圆圈形状转换成一个260x260px正方形与CSS动画。

在那之前我很好，但我不能让fadeIn/fadeOut工作。有办法通过在父元素上切换CSS类来处理这个问题吗？

我不能只使用不透明度0到不透明度1，因为我需要图标真正消失，显示无。当返回到circle+icon状态时，另一个也是如此。但我甚至不能让不透明动画发挥作用。我也尝试过使用fadeIn和fadeOut的关键帧，但也没有工作。

我找到了这个小提琴，但是它看起来太难看了，不得不使用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

在那之前我很好，但我不能让fadeIn/fadeOut工作。有办法通过在父元素上切换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>

​