javascript - 如何使用jQuery从右侧滑入过渡？

我有一个代码，当您单击button时，会出现一个div。但问题是，我的div从顶部滑入，当有人单击按钮时，我想获得它，而它在过渡时从右侧滑入。但是我不知道如何更改当前代码以使其正常工作。我知道我不能从display: none切换到visibility和opacity来添加CSS动画，对吗？那么我该怎么做才能使它尽可能平滑？有人可以看看一下帮我吗？

这是我的代码：

$(function() {
  $("a#toggle").click(function() {
    $("#slidein").slideToggle();
    return false;
  });
});

#slidein {
  display: none;
}

.card {
  background-color: #bdbdbd;
  text-transform: uppercase;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
}

.close {
  position: absolute;
  right: 0;
  background: #fff;
  opacity: 1;
  color: #29292b;
  font-size: 10px;
  text-decoration-color: #757575;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="slidein">
  <div class="card rounded-0 border-0">
    <div class="card-header border-0 p-0">
      <button type="button" class="close p-2">
      <span aria-hidden="true">x close</span>
    </button>
      <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
    </div>
    <!-- /.card-header -->

    <div class="card-block py-4 px-3">
      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT
        <span>TEXT</span>
        <span>TEXT</span>
      </p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <div class="form-group">
        <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
      </div>
    </div>
    <!-- /.card-block -->

  </div>
</div>
<a href="#" id="toggle">Contact</a>

最佳答案

您可以使用CSS transition实现目标。最初，面板#slidein中的幻灯片将位于屏幕右边缘之外。单击in时，将切换CSS类a#toggle。单击button.close将从in中删除​​类#slidein，这将使面板滑出。

$(function() {
  $("a#toggle").click(function() {
    $("#slidein").toggleClass("in");
    return false;
  });

  $("button.close").click(function() {
    $("#slidein").removeClass("in");
    return false;
  });
});

#slidein {
  position: fixed;
  top: 0;
  width: 100%; /*modify this value to fit your needs*/
  right: -100%; /*modify this value to fit your needs*/

  /*css transition*/
  -webkit-transition: right 500ms ease-out;
  -moz-transition: right 500ms ease-out;
  -o-transition: right 500ms ease-out;
  transition: right 500ms ease-out;
}

#slidein.in {
  right: 0;
}

.card {
  background-color: #bdbdbd;
  text-transform: uppercase;
  height: 100%;
}

.close {
  position: absolute;
  right: 0;
  background: #fff;
  opacity: 1;
  color: #29292b;
  font-size: 10px;
  text-decoration-color: #757575;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="slidein">
  <div class="card rounded-0 border-0">
    <div class="card-header border-0 p-0">
      <button type="button" class="close p-2">
      <span aria-hidden="true">x close</span>
    </button>
      <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
    </div>
    <!-- /.card-header -->

    <div class="card-block py-4 px-3">
      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT
        <span>TEXT</span>
        <span>TEXT</span>
      </p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <div class="form-group">
        <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
      </div>
    </div>
    <!-- /.card-block -->

  </div>
</div>
<a href="#" id="toggle">Contact</a>