css - 在没有 "snapping"的情况下，如何淡出一个元素并淡入另一个元素？

Question

我正在尝试使用“ng-show”淡出一个元素并同时淡入另一个元素。这一切都很好而且很漂亮，但不幸的是，当正在淡出的元素被隐藏时，当 display: none 设置时似乎有一些“捕捉”。

我尝试在我的 ng-hide-add-active 和 ng-hide-remove-active 上设置 position: absolute 但是这只会搞砸布局。

HTML:

    <div class="container">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <div id="form-container">
        <div class="page-header text-center">
          <h1 id="wf-logo">Hello</h1>
          <hr />
          <div>
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Stuff Box</h3>
              </div>
              <div class="sk-folding-cube animate" ng-show="!doneLoading">
                <div class="sk-cube1 sk-cube"></div>
                <div class="sk-cube2 sk-cube"></div>
                <div class="sk-cube4 sk-cube"></div>
                <div class="sk-cube3 sk-cube"></div>
              </div>
              <div id="content-well" class="well animate" ng-show="doneLoading">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia urna vitae lectus faucibus porta. Nulla eu consequat nisl. Quisque fringilla sapien id vulputate sollicitudin. Curabitur et facilisis justo. Donec malesuada augue vitae diam maximus luctus. Nulla fermentum consectetur ipsum ut tempor. Curabitur pretium eros eget nisi bibendum fermentum. Cras fermentum egestas nunc ut vulputate. Nulla aliquam tortor ut nulla consequat faucibus. Fusce imperdiet, felis nec semper vestibulum, magna dui ultricies tortor, eget mattis mauris arcu et ipsum. Suspendisse imperdiet nec mauris eget placerat.</p>

                <p>Nulla purus augue, congue sed sollicitudin ut, volutpat sed ex. Donec lobortis sem eu risus consequat tincidunt. Nullam egestas lectus et semper gravida. Suspendisse facilisis erat a eros scelerisque euismod. Sed elementum eros ac nibh viverra condimentum eu vel mi. Ut sit amet nulla sit amet velit dignissim cursus quis ut mi. In a ultrices dolor. Proin sollicitudin sit amet lorem in fringilla. Mauris ac egestas est. Donec quis fermentum est, nec interdum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id massa pellentesque, fringilla orci id, ultrices nisl. Nam non viverra felis, ac sodales justo.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

/* Styles */

#content-well {
  margin-bottom: 0px;
}

/* Animations */

.animate.ng-hide-add,
.animate.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate.ng-hide-add.ng-hide-add-active,
.animate.ng-hide-remove {
  opacity:0;
}

.animate.ng-hide-add,
.animate.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

/* Folding cube spinner */

.sk-folding-cube {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

请看这个 Plunker:

http://plnkr.co/edit/6vSRIJ8xkmn75S9FyLMJ?p=preview

是否可以让加载微调器和内容都保持居中并正确定位，同时一个淡出另一个淡入？任何帮助将不胜感激。谢谢!

Answer 1

将 position: absolute 放在两个容器之一上。

例如:

.sk-folding-cube {
  position: absolute;

缺点是您必须添加更多 CSS 来根据需要定位元素并使其看起来像面板包裹它。

例如:

.panel {
  min-height: 161px;
}

.sk-folding-cube {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 40px;
  height: 40px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

演示: http://plnkr.co/edit/5lYJneAkT6TwYkfg3KPJ?p=preview

另一个解决方案是完全跳过淡出动画。就个人而言，当元素重叠时，我很少发现有必要让一个元素淡入而另一个元素淡出。相反，只需隐藏第一个并淡入另一个。也许是品味问题。

演示: http://plnkr.co/edit/iudjWchMXzc3wILhQmsY?p=preview