Using the jquery animation slideToggle with angular repeater

Question

I'm playing with my version of toasts and it looks really nice, but when I animate the angular repeater items enter and leave events with jQuery slideToggle it only works for the first element in the list. The first one entering animates, the rest don't and when an element leaves it only animates if it's the topmost in the list.

The animation is hooked up threw an angular animation, like this.

angular.module("toastCE").animation(".toast-item", function(){
var enter = function(elem, done){
    elem.hide().slideToggle("slow", done);
}, leave = function(elem, done){
    elem.slideToggle("slow", done);
};

return {
    enter: enter, 
    leave: leave
}
});

The repeater is in a directive with this (quite extensive) template.

<div class='toast-container' data-ng-class='config.positionClasses[config.position]'>
<ul>
    <li class='toast-item' data-ng-repeat='toast in toasts'>
        <div class='alert col-sm-6' data-ng-class='toast.class' data-ng-mouseenter="pauseTimer(toast)" data-ng-mouseleave="playTimer(toast)" data-ng-click="toast.closeOnClick ? close(toast.id) : null" data-ng-style="toast.clickable">
            <div class='toast-content'>
                <span data-ng-if="toast.showCloseButton">
                    <button type="button" class="close" aria-label="Close" data-ng-click="close(toast.id)"><span aria-hidden="true">&times;</span></button>
                </span>
                <strong ng-if='toast.title'>{{toast.title}}</strong>
                <toast-message message="toast.message" scope="toast.scope"></toast-message>
            </div>
            <div class="bar-timer progress" data-ng-if="toast.timerEnabled && toast.showTimer">
                <div class="bar-inner progress-bar" data-ng-class="config.progressBarClassPre + toast.typeName" data-ng-style="toast.timerStyle"></div>
            </div>
        </div>
    </li>
</ul>
</div>

Have a look at the behavior at my project githubpage .

The entire code can be found at the github repo if you think the problem might lie elsewhere.

I'd be grateful for any and all feedback.

Answer 1

This is a CSS issue.

With your current CSS the li elements are not wrapping their inner div elements and have heights of zero.

You will need to trigger block formatting contexts.

There are multiple ways to do this .

One way is to use overflow: auto :

.toast-item {
  list-style: none;
  overflow: auto;
}

Demo: http://plnkr.co/edit/je1jKe64M2Sb2mJlC3Tp?p=preview