Анимация ng-hide с помощью UI-Grid

У меня есть форма, в которой я использую ng-hide внизу страницы, чтобы скрыть div, содержащий таблицу UI-Grid, как это было предложено Скрытые сетки в документации. Когда пользователь нажимает кнопку отправки, сетка становится видимой, как и ожидалось, но ее отображение не анимируется. Странно то, что div, содержащий сетку, кажется, отлично анимируется.

Я повторил проблему в этом Plunker, и вот соответствующий код для справки. Это действительно ставит меня в тупик, поэтому любой совет очень ценится. Благодарю вас!

HTML

<h4><a href="#" ng-click="hidden = ! hidden">Reveal</a></h4>
<div class="background animate-hide" ng-hide="hidden">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>

CSS

.grid {
  width: 500px;
  height: 250px;
  display: block;
  position:relative;
}

.background {
  padding: 15px;
  background-color: #F7F7F7;
}

.animate-hide {
  transition: opacity 0.4s ease-out 0.1s !important;
  transition: height 0.5s ease-out !important;
  opacity: 1;
  height: 260px;
}

.animate-hide.ng-hide {
  opacity: 0;
  height: 0;
}

}


angularjs ng-animate angular-ui-grid
person dsal1951    schedule 12.07.2015    source источник
comment
да, для виртуализированных данных анимация не подойдет. возможно, этот ответ поможет - stackoverflow.com/questions/28901013/   -  person sfletche    schedule 12.07.2015
comment
@sfletche его можно анимировать и он не имеет ничего общего с виртуализированными данными. Оказалось, что это простая проблема css   -  person dsal1951    schedule 17.07.2015
comment
Право на. рад это слышать. спасибо, что держишь меня в курсе.   -  person sfletche    schedule 17.07.2015

Ответы (1)


arrow_upward
3
arrow_downward

Поскольку сетка имеет явный набор высоты, она переполняет div .background. Значение по умолчанию свойства CSS overflow равно visible, что означает, что сетка будет выходить за пределы размеров своего контейнера и будет полностью видна.

Вы можете исправить это, добавив overflow: hidden в свой класс .animate-hide:

.animate-hide {
  transition: opacity 0.4s ease-out 0.1s !important;
  transition: height 0.5s ease-out !important;
  opacity: 1;
  height: 260px;
  overflow: hidden;
}

Вот обновленный плункер, показывающий эффект: http://plnkr.co/edit/3kO5HqSZTGVM8A3YScYq?p=preview

person c0bra    schedule 16.07.2015
comment
Я не могу поверить, сколько часов я пытался выяснить, была ли проблема связана с тем, как ui-grid виртуализирует данные, или изменения в Angular 1.4 как-то повлияли на ситуацию. Мне даже не приходило в голову, что это глупая штука с CSS. Думаю, это хороший урок: не предполагать, что проблема сложнее, чем она есть на самом деле. Большое спасибо за Вашу помощь! - person dsal1951; 17.07.2015