Question

我试图动画两个重叠div的宽度，以显示/隐藏其中包含的文本。我想要一个div从左到右动画，另一个从右到左动画，这样当一条文字被擦掉时，另一条文字就会被显示出来。

这是迄今为止我所掌握的JS小提琴，但它们都是从左到右显示出来的。如何取消＆＃39;取消＆＃39;从右到左透露？

我认为这些规则可以做到，但它并不适合我：

.foo {
    right: 0;
    width: 0;
}

.foo.active{
    right: 0;
    width: 120px;
}

此外，他们在动画时都会略微移动？有人能看到一个简单的解决方案吗？

非常感谢！

Answer 1

在这种情况下，从右到左动画元素的宽度会导致一些问题，因为动画元素子cancel-text是左对齐的。看起来它会从右边滑入。

最简单的解决方案是离开cancel-text，并为登录设置动画，给它一个背景颜色（因此它隐藏取消），给它们两个绝对位置，你很可能得到所需的结果（如果我做对了）

$(document).ready(function(){
  $('.clicker').on("click", function(){
    // if($('.email.input').val() ){
      $('.email.input').toggleClass('up');
      $('.password.input').toggleClass('up');
      $('.signup').toggleClass('up');
      $('.login').toggleClass('up');
      $('.login-text-container').toggleClass('active');
    // }
  });
});

.center-clicker {
  display: flex;
  width: 100vw;
  height: 50px;
  top: 5vh;
  position: absolute;
}

.clicker {
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  height: 7.5vh;
  background: none;
}

.clicker:hover {
  cursor: pointer;
}

.text-container {
  text-align: center;
  height: 100%;
  width: 120px;
}

.login-text {
  font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  white-space: nowrap;
  font-weight: 100;
  font-size: 2.6em;
  color: black;
}

.cancel-text {
  font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  font-size: 2.6em;
  color: black;
}

.login-container {
  height: 100%;
  width: 100%;
  position: absolute;
}

.login-text-container {
  position: absolute;
  background: white;
  overflow: hidden;
  left: 0;
  width: 0;
  -webkit-transition: width .4s;
  transition: width .4s;
}

.login-text-container.active {
  width: 100%;
  -webkit-transition: width .4s;
  transition: width .4s;
}

.cancel-container {
  height: 100%;
  width: 100%;
  position: absolute;
}

.cancel-text-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="center-clicker">
  <div class="clicker">
    <div class="text-container">
      <div class="cancel-container">
        <div class="cancel-text-container">
          <span class="cancel-text">cancel</span>
        </div>
      </div>
      <div class="login-container">
        <div class="login-text-container active">
          <span class="login-text">&nbsp;log in&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我刚刚将.cancel-text-container的{{1}}值修改为right:-110px;，将left:0;的值.login-text-container.active修改为left:10px;

这是你想要的吗？：

Updated Fiddle

CSS动画Div宽度从左到右

2 个答案: