Как я могу исчезнуть из одного элемента и исчезнуть из другого без «щелчка»?

0

Я пытаюсь вымыть один элемент, используя "ng-show", и постепенно исчезать в другом. Это работает отлично и денди, но, к сожалению, когда элемент, который исчезает, скрыт, по-видимому, есть некоторая "привязка" при display: none не установлен.

Я попытался установить position: absolute на моем ng-hide-add-active & ng-hide-remove-active но это просто закручивает макет.

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

Возможно ли, чтобы загрузочный спиннер и контент оставались центрированными и правильно размещены, а один исчезает, а другой затухает? Будем очень благодарны любой помощи. Спасибо!

  • 0
    Пожалуйста, включите код в сам вопрос; не просто ссылка на него. В противном случае, как только умирает внешняя ссылка, вопрос в будущем становится совершенно бессмысленным.
  • 0
    Понял, выложу, когда вернусь на ПК.
Теги:
ng-animate

1 ответ

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/5lYJAATTTTTTTTKYGFGPJ?p=preview

Другое решение - просто полностью пропустить анимацию выцветания. Лично, когда элементы перекрываются, я редко нахожу необходимым, чтобы один из элементов исчезал, а другой исчезал. Вместо этого просто спрячьте первое и затухайте в другом. Возможно, дело вкуса.

Демо: http://plnkr.co/edit/iudjWchMXzc3wILhQmsY?p=preview

  • 0
    Имеет смысл, потрясающе. Спасибо за вашу помощь tasseKATT !!
  • 1
    Пожалуйста :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню