javascript - 将块动画滑动到另一个块，最后有弹跳

Question

我正在尝试重现这种效果：Design URL

我制作了 CSS 和一点 JavaScript，但我不知道如何让白色块向左/向右滑动并在最后做那个小技巧的跳转，然后显示带有一点淡入的文本（这部分，我想我可以很容易地找到它）。

到目前为止，这是我的 CSS 和 JS：

// Login button comportment -> to Register
  $('.login-box-texts .btn').on('click', function (e) {
    e.preventDefault();
    $('.login-box').addClass('is-hidden');
    $('.login-box-texts').addClass('is-hidden');
    $('.register-box').removeClass('is-hidden');
    $('.register-box-texts').removeClass('is-hidden');
  });

  // Register button comportment -> to Login
  $('.register-box-texts .btn').on('click', function (e) {
    e.preventDefault();
    $('.register-box').addClass('is-hidden');
    $('.register-box-texts').addClass('is-hidden');
    $('.login-box').removeClass('is-hidden');
    $('.login-box-texts').removeClass('is-hidden');
  });

.btn {
  position: relative;
  display: inline-block;
  padding: 18px 30px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.btn::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  border-right: 1px solid transparent!important;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  transition: width .3s ease-in-out;
}

.btn::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: -3px;
  border-left: 1px solid transparent!important;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: width .3s ease-in-out;
}

.btn:hover::before,
.btn:hover::after {
  width: 50%!important;
}
.overlay-login-register-box {
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 1000;
}

.login-register-box {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  background: url('http://placehold.it/890x393');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 890px;
  height: 393px;
  z-index: 9000;
}

.login-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(100% + (35px * 2));
  width: 500px;
  margin-top: -35px;
  margin-left: 45px; 
  background-color: #FFF;
}

.register-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(100% + (35px * 2));
  width: 500px;
  margin-top: -35px;
  margin-right: 45px; 
  background-color: #FFF;
}

.login-register-title {
  text-transform: uppercase;
  color: #081117;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0;
}

.login-register-subtitle {
  color: #081117;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  margin-top: 18px;
  margin-bottom: 40px;
}

.login-register-box .btn {
  text-transform: uppercase;
  color: #081117;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.35px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 45px;
  padding-right: 25px;
  background: linear-gradient(to top right, #01f1bd , #64ffb1);
  margin-bottom: 20px;
  margin-top: 30px;
}

.login-register-box .btn i {
  margin-left: 25px;
}

.login-register-forgot-password {
  color: #02d4a6;
  display: block;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.6px;
}

.login-register-box .form-control {
  border: 2px solid #e5e5e5;
  padding: 15px;
  padding-left: 50px;
}

.login-register-box .input-with-icon {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

.login-register-box .input-with-icon:not(:last-of-type) {
  margin-bottom: 12px;
}

.input-with-icon {
  position: relative;
}

.input-with-icon img {
  position: absolute;
  left: 10px;
  bottom: 0;
  top: 0;
  margin: auto;
}

.login-box-texts,
.register-box-texts {
  display: flex;
  align-items: center;
  max-width: 300px;
  margin: 0 auto;
}

.login-box-text-register {
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  margin-top: 40px;
  margin-bottom: 15px;
}

.login-box-text-subtext {
  color: #FFF;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
}

.login-box-texts .btn,
.register-box-texts .btn {
  background: transparent;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.36px;
  border: 3px solid rgba(255, 255, 255, .4);
  padding: 15px 45px;
  margin-top: 45px;
}

.login-box-texts .btn::before,
.login-box-texts .btn::after,
.register-box-texts .btn::before,
.register-box-texts .btn::after {
  width: 30px;
  border: 3px solid #FFF;
}

.login-box-texts .btn i,
.register-box-texts .btn i {
  margin-left: 20px;
}

.is-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay-login-register-box"></div>
  <div class="login-register-box">

    <!-- LOGIN BOX -->
    <div class="login-box">
      <div class="container">
        <div class="text-center">
          <p class="login-register-title">Welcome back!</p>
          <p class="login-register-subtitle">Please, enter your login details to access your account.</p>
          <form action="#">
            <div class="input-with-icon">
                <input type="text" class="form-control" placeholder="Username">
                <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt=""> 
            </div>
            <div class="input-with-icon">
                <input type="password" class="form-control" placeholder="Password">
                <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt=""> 
            </div>
            <a href="#" class="btn">Login <i class="fa fa-play"></i></a>
            <a href="#" class="login-register-forgot-password">Forgot password?</a>
          </form>
        </div>
      </div>
    </div>
    <div class="login-box-texts text-center">
      <div class="container">
        <img src="http://placehold.it/328x94" class="img-responsive" alt="">
        <p class="login-box-text-register">Don't have an account ?</p>
        <p class="login-box-text-subtext">Please register for future access to your account and orders.</p>
        <a href="#" class="btn">Register <i class="fa fa-play"></i></a>
      </div>
    </div>
    <!-- END LOGIN BOX -->

    <!-- REGISTER BOX -->
    <div class="register-box-texts text-center is-hidden">
        <div class="container">
          <img src="http://placehold.it/328x94" class="img-responsive" alt="">
          <p class="login-box-text-register">Already have an account?</p>
          <p class="login-box-text-subtext">Please, register for future access to your account and orders.</p>
          <a href="#" class="btn">Login <i class="fa fa-play"></i></a>
        </div>
      </div>
    <div class="register-box is-hidden">
        <div class="container">
          <div class="text-center">
            <p class="login-register-title">Welcome!</p>
            <p class="login-register-subtitle">Please, fill all the fields to create your account.</p>
            <form action="#">
              <div class="input-with-icon">
                  <input type="text" class="form-control" placeholder="Username">
                  <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt=""> 
              </div>
              <div class="input-with-icon">
                  <input type="password" class="form-control" placeholder="Password">
                  <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt=""> 
              </div>
              <a href="#" class="btn">Register <i class="fa fa-play"></i></a>
            </form>
          </div>
        </div>
      </div>
    <!-- END REGISTER BOX -->
  </div>

我看到当它是同一个 div 时如何“反弹”一个 div，但我不知道，也许我必须调整我的 HTML 结构？我不知道。

谢谢你的帮助。

编辑：我找到了一种让它滑动并让它变得很棒的方法。但是我没有找到像我给你的网址那样流畅的方法，如果你能帮助我，那就太好了^^

这是代码：

// Login button comportment -> to Register
$('.login-box-texts .btn').on('click', function(e) {
  e.preventDefault();

  $('.register-box').removeAttr('style');
  $('.login-register-box-container').css({
    'margin-left': 20,
    'margin-right': 45
  });

  $('.login-box').css('left', 'inherit');
  $('.login-box-texts').addClass('is-hidden');
  $('.login-box').animate({
    'right': 0
  }, {
    complete: function() {
      $('.login-box').addClass('is-hidden');
      $('.register-box').removeClass('is-hidden');
      $('.register-box-texts').removeClass('is-hidden');
    }
  });
});

// Register button comportment -> to Login
$('.register-box-texts .btn').on('click', function(e) {
  e.preventDefault();

  $('.login-box').removeAttr('style');
  $('.login-register-box-container').css({
    'margin-left': 45,
    'margin-right': 20
  });

  $('.register-box').css('left', 'inherit');
  $('.register-box-texts').addClass('is-hidden');
  $('.register-box').animate({
    'left': 0
  }, {
    complete: function() {
      $('.register-box').addClass('is-hidden');
      $('.login-box').removeClass('is-hidden');
      $('.login-box-texts').removeClass('is-hidden');
    }
  });
});

.btn {
  position: relative;
  display: inline-block;
  padding: 18px 30px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.btn::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  border-right: 1px solid transparent!important;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  transition: width .3s ease-in-out;
}

.btn::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: -3px;
  border-left: 1px solid transparent!important;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  transition: width .3s ease-in-out;
}

.btn:hover::before,
.btn:hover::after {
  width: 50%!important;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 1000;
}

.login-register-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url('../img/login-register-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 890px;
  height: 393px;
  z-index: 9000;
}

.login-register-box-container {
  display: flex;
  position: relative;
  height: calc(100% + (35px * 2));
  flex-direction: row;
  margin-top: -35px;
  margin-right: 20px;
  margin-left: 45px;
}

.login-box {
  display: inline-flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  align-items: center;
  width: 500px;
  background-color: #FFF;
  transition-timing-function: cubic-bezier(0.91, 0.8, 0.54, 1.39)
}

.register-box {
  display: inline-flex;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  width: 500px;
  background-color: #FFF;
  transition-timing-function: cubic-bezier(0.91, 0.8, 0.54, 1.39)
}

.login-register-title {
  text-transform: uppercase;
  color: #081117;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0;
}

.login-register-subtitle {
  color: #081117;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  margin-top: 18px;
  margin-bottom: 40px;
}

.login-register-box .btn {
  text-transform: uppercase;
  color: #081117;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.35px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 45px;
  padding-right: 25px;
  background: linear-gradient(to top right, #01f1bd, #64ffb1);
  margin-bottom: 20px;
  margin-top: 30px;
}

.login-register-box .btn i {
  margin-left: 25px;
}

.login-register-forgot-password {
  color: #02d4a6;
  display: block;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.6px;
}

.login-register-box .form-control {
  border: 2px solid #e5e5e5;
  padding: 15px;
  padding-left: 50px;
}

.login-register-box .input-with-icon {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

.login-register-box .input-with-icon:not(:last-of-type) {
  margin-bottom: 12px;
}

.input-with-icon {
  position: relative;
}

.input-with-icon img {
  position: absolute;
  left: 10px;
  bottom: 0;
  top: 0;
  margin: auto;
}

.login-box-texts {
  display: flex;
  align-items: center;
  max-width: 300px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.register-box-texts {
  display: flex;
  align-items: center;
  max-width: 300px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.login-box-text-register {
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  margin-top: 40px;
  margin-bottom: 15px;
}

.login-box-text-subtext {
  color: #FFF;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
}

.login-box-texts .btn,
.register-box-texts .btn {
  background: transparent;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.36px;
  border: 3px solid rgba(255, 255, 255, .4);
  padding: 15px 45px;
  margin-top: 45px;
}

.login-box-texts .btn::before,
.login-box-texts .btn::after,
.register-box-texts .btn::before,
.register-box-texts .btn::after {
  width: 30px;
  border: 3px solid #FFF;
}

.login-box-texts .btn i,
.register-box-texts .btn i {
  margin-left: 20px;
}

.is-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="login-register-box">

  <div class="login-register-box-container">
    <!-- LOGIN BOX -->
    <div class="login-box">
      <div class="container">
        <div class="text-center">
          <p class="login-register-title">Welcome back!</p>
          <p class="login-register-subtitle">Please, enter your login details to access your account.</p>
          <form action="#">
            <div class="input-with-icon">
              <input type="text" class="form-control" placeholder="Username">
              <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt="">
            </div>
            <div class="input-with-icon">
              <input type="password" class="form-control" placeholder="Password">
              <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt="">
            </div>
            <a href="#" class="btn">Login <i class="fa fa-play"></i></a>
            <a href="#" class="login-register-forgot-password">Forgot password?</a>
          </form>
        </div>
      </div>
    </div>
    <div class="login-box-texts text-center">
      <div class="container">
        <img src="<?php echo asset('assets/img/logo-header.png'); ?>" class="img-responsive" alt="">
        <p class="login-box-text-register">Don't have an account ?</p>
        <p class="login-box-text-subtext">Please register for future access to your account and orders.</p>
        <a href="#" class="btn">Register <i class="fa fa-play"></i></a>
      </div>
    </div>
    <!-- END LOGIN BOX -->

    <!-- REGISTER BOX -->
    <div class="register-box-texts text-center is-hidden">
      <div class="container">
        <img src="<?php echo asset('assets/img/logo-header.png'); ?>" class="img-responsive" alt="">
        <p class="login-box-text-register">Already have an account?</p>
        <p class="login-box-text-subtext">Please, register for future access to your account and orders.</p>
        <a href="#" class="btn">Login <i class="fa fa-play"></i></a>
      </div>
    </div>
    <div class="register-box is-hidden">
      <div class="container">
        <div class="text-center">
          <p class="login-register-title">Welcome!</p>
          <p class="login-register-subtitle">Please, fill all the fields to create your account.</p>
          <form action="#">
            <div class="input-with-icon">
              <input type="text" class="form-control" placeholder="Username">
              <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt="">
            </div>
            <div class="input-with-icon">
              <input type="password" class="form-control" placeholder="Password">
              <img src="<?php echo asset('assets/img/join-our-team-form-1.jpg'); ?>" alt="">
            </div>
            <a href="#" class="btn">Register <i class="fa fa-play"></i></a>
          </form>
        </div>
      </div>
    </div>
    <!-- END REGISTER BOX -->
  </div>

</div>

如您所见，我找到了一种方法来做滑块。现在我认为这只是一个动画的东西，但我真的不明白如何不做类似于我在 URL 中展示给你的东西：/

谢谢

标签： javascriptjqueryhtmlcss