CSS动画只有一种方式

Question

我有一个div点击它时会向上滑动另一个div，但当我关闭已滑动的div时，它不会向下滑动，它只是突然消失了。

我尝试将转换放在.agent-modal上，但它取得了相同的结果。

＆＃13;

＆＃13;

$('[data-agent]').click(function() {
  var element = $(this);
  var target = element.data('agent');
  $('body').addClass('agentLoaded');
  $('[data-agent-target="' + target + '"]').addClass('active');
  return false;
});
$('.close').click(function() {
  $('[data-agent-target]').removeClass('active');
  $('body').removeClass('agentLoaded');
  return false;
});

＆＃13;

.agent-modal {
  position: fixed;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  left: 275px;
  opacity: 1;
  width: calc(100% - 275px);
  height: 100%;
  background-color: $c-blue;
  &.active {
    overflow: auto;
    top: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-2 col-md-4 agent">
  <a href="#" data-agent="alexander-cuturilo">
    <div class="agent-meta">
      <div class="agent-name">
        <h5>Alexander Cuturilo</h5>
      </div>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;