Анимация дочернего элемента с ngAnimate и animate.css

У меня есть приложение, которое использует Angular 1.5, и я использую ngAnimate и animate.css для обработки простых анимаций. Я столкнулся с проблемой, когда мне нужно анимировать дочерний элемент, а ng-enter/leave применяется к его родительскому элементу через ng-if.Анимация дочернего элемента с ngAnimate и animate.css

Вот моя разметка:

<div class="parent" ng-if="vm.showPanel"> 
    <div class="child animated"> <!--This is the element that need the animation--> 
    some content 
    </div> 
</div>

Вот CSS:

.parent.ng-enter > div.child{ 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child{ 
    animation: bounceOutRight 1s; 
}

Если я применить анимацию к родительскому элементу он работает просто отлично, но мне нужно это в том, что дочерний элемент , Какие-либо предложения?? Я знаю, что это должно быть что-то довольно прямое, но я не уверен, что мне не хватает. Спасибо заранее, ребята.

источник

2016-08-10 Daniel Perez

вы смотрели на [ 'нг-одушевленных детях = "истинный"'] (https://code.angularjs.org/1.5.8/docs/api/ngAnimate/директива/ngAnimateChildren)? – plong0

@ plong0 Я пробовал это, но не повезло:/ –

Я думаю, что это будет работать, только если родитель анимируется. Подумайте, как ngAnimate сохраняет элемент DOM, когда ng-if удаляет его. Без сохранения родителя (т. Е. Путем анимации) ребенок исчезнет вместе с ним.

Рассмотрите возможность использования ng-animate-children="true" и добавления родительской анимации для родителя, чтобы его ребенок мог оставаться достаточно долго, чтобы быть анимированным.

Если у вас есть другие дети под родителями, которые вы хотите, чтобы исчезнуть/появиться сразу, добавьте еще несколько правил CSS, как:

.parent.ng-leave > .other-child { 
    display: none; 
    visibility: hidden; 
}

источник

2016-08-10 16:02:48 plong0

Добавление анимации в родительский элемент делало трюк, вы были абсолютно правы, все было связано с выбором времени ... Сохранение родительского элемента в DOM с анимацией fadeIn/Out позволило мне чтобы затем применить анимацию, которую я хотел к дочернему элементу. Спасибо!! –

Для тех, кто работает в том же номер, решение было все о время у меня было чтобы применить анимацию к родительскому элементу, это позволило ngAnimate сохранить ее в DOM, не удаляя ее вместе с ее дочерними элементами (смотрите https://stackoverflow.com/a/38878432/6301843).

устанавливаемых сотовый закончился выглядеть так:

.parent.ng-enter { 
    animation: fadeIn 800ms; 
} 
.parent.ng-leave { 
    animation: fadeOut 800ms; 
} 
.parent.ng-enter > div.child { 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child { 
    animation: bounceOutRight 1s; 
}

Кроме того, необходимо будет добавить эти нг-одушевленные ребенок = «истинные» к разметке. Так что мой HTML закончился выглядеть так:

<div ng-if="vm.someConditional" ng-animate-children="true" class="parent"> 
    <div class="child">Content</div> 
</div>

источник

2016-08-11 12:37:30

Анимация дочернего элемента с ngAnimate и animate.css

ответ

Смежные вопросы