jquery - 如何在第二次点击时反转CSS动画

Question

我创建了一个绘制三条线并为其设置动画的动画。

1. 顶部，从右到左
2. 左，从上到下
3. 底部，从左到右。

内容包装器是display: none，当单击#btn时，它会显示并且该行会动画化。我预计第二次点击线动画会反转，内容包装器应返回到 display: none。

我尝试了下面的代码，但没有成功。有人可以给我一些建议吗？

$('#btn').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $('.content-wrapper').css({
      'display': 'none'
    });
  } else {
    $('.content-wrapper').css({
      'display': 'block'
    });
  }
  $(this).data("clicks", !clicks);
});

.content-wrapper {
  display: none;
  width: 68.5%;
  height: 60%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
}

.l-top,
.l-left,
.l-bottom {
  position: absolute;
  background: transparent;
  -webkit-animation-duration: .4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-direction: alternate;
}

.l-top {
  top: 0;
  right: 0;
  height: 1px;
  -webkit-animation-name: l-top;
  -webkit-animation-delay: 0s;
}

.l-left {
  top: 0;
  left: 0;
  width: 1px;
  -webkit-animation-name: l-left;
  -webkit-animation-delay: .4s;
}

.l-bottom {
  left: 0;
  bottom: 0;
  height: 1px;
  -webkit-animation-name: l-bottom;
  -webkit-animation-delay: .8s;
}

@-webkit-keyframes l-top {
  0% {
    width: 0;
    background: red;
  }
  100% {
    width: 100%;
    background: red;
  }
}

@-webkit-keyframes l-left {
  0% {
    height: 0;
    background: red;
  }
  100% {
    height: 100%;
    background: red;
  }
}

@-webkit-keyframes l-bottom {
  0% {
    width: 0;
    background: red;
  }
  100% {
    width: 100%;
    background: red;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</btn>
  <div class="content-wrapper">
    <span class="l-top"></span>
    <span class="l-left"></span>
    <span class="l-bottom"></span>
    <p>content</p>
  </div>

Answer 1

使用过渡而不是动画怎么样？我必须对内容包装器的宽度本身进行动画处理，因此它并不是真正隐藏的，而只是 0 宽度，但这实际上是相同的。

$('#btn').click(function() {
  $('.content-wrapper').toggleClass('open');
});

.content-wrapper {
  display: block;
  width: 0;
  height: 60%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  background: transparent;
  overflow: hidden;
  transition: width .1s 1.2s;
}

.content-wrapper.open {
  width: 68.5%;
  transition: width .1s;
}

.l-top,
.l-left,
.l-bottom {
  position: absolute;
  background: red;
}

.content-wrapper .l-top {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
  transition: width .4s .8s;
}

.content-wrapper.open .l-top {
  width: 100%;
  transition: width .4s;
}

.content-wrapper .l-left {
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  transition: height .4s .4s;
}

.content-wrapper.open .l-left {
  height: 100%;
  transition: height .4s .4s;
}

.content-wrapper .l-bottom {
  width: 0;
  left: 0;
  bottom: 0;
  height: 1px;
  transition: width .4s;
}

.content-wrapper.open .l-bottom {
  width: 100%;
  transition: width .4s .8s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btn">btn</div>
<div class="content-wrapper">
  <span class="l-top"></span>
  <span class="l-left"></span>
  <span class="l-bottom"></span>
  <p>content</p>
</div>