Анимирайте ng-hide с UI-Grid

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

Копирах проблема в този Plunker и ето съответния код за справка. Този наистина ме стъписва, така че всеки съвет е много ценен. Благодаря ти!

HTML

<h4><a href="/bg#" 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
да, за виртуализирани данни animate няма да работи. може би този отговор ще помогне -- 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

Тъй като мрежата има изрично зададена височина, тя препълва .background div. Стойността по подразбиране на свойството overflow CSS е 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