无法隐藏底层div，且不透明度设置为1

Question

这就是我现在所看到的。

我希望看到的是带有文字的div＆＃39; Top＆＃39;应该完全黯然失色的＆＃39; Under＆＃39;格。

这是我的代码（available in codepen）：

的Javascript

$(document).ready(function () {
  init();
});

function init() {
  $('input').on('click',
    function () {
      $('.answer').addClass('textout');
    });
}

CSS

.row {
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  width:100%;
  position: absolute;
  opacity: 1;
  z-index: 100;
}

.answer-new {
  position: absolute;
   /* border: 1px solid blue;*/
   width: 100%;
  z-index: 1;
}
.textout {
  position: absolute;
  margin: 0;
  left: 0;
  transform: translateX(1000px);
  transition: transform 2s ease-in;
}

HTML

<div class="contrainer">
  <div>
    <input type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>

  </div>

</div>

我的问题：

在这种情况下opacity是隐藏另一个div的正确方法吗？什么是正确的方法？我想保持＆＃39; Under＆＃39; div可见因为css转换应该实现“显示”。效果

Answer 1

你可以给上面的div一个背景颜色来隐藏下面的div，直到它滑开。

或

您可以为底层div提供0的不透明度，并在显示时将其淡入。

查看更新的codepen

JS

$(document).ready(function () {
  init();
});

function init() {
  $('input').on('click',
    function () {
      $('.answers').addClass('textout');
    });
}

CSS

.row {
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;
  position: absolute;
  opacity: 1;
  z-index: 100;
}

.answer-new {
  font-size: 40px;
  position: absolute;
   /* border: 1px solid blue;*/
   width: 100%;
  z-index: 1;
  opacity: 0;
}
.answers.textout .answer-new {
  opacity: 1;
  transition: opacity 400ms 200ms ease-in;
}

.answers.textout .answer {
  position: absolute;
  margin: 0;
  left: 0;
  transform: translateX(1000px);
  transition: transform 2s ease-in;
}

Answer 2

将.answer属性应用于.answer { font-size: 40px; color: red; width:100%; position: absolute; opacity: 1; z-index: 100; background:#fff; } 元素是否满足您的需求？

width:0

修改

如果您不知道容器的背景或它不是纯色，那么您可以使用overflow:hidden和<site-menu> <site-menu-item title="Search" href="#/search"/> <site-menu-item title="Reports" href="#/reports"/> <site-menu-item title="About" href="#/about"/> </site-menu> 来解决此问题，例如：{{3 }}