将 jquery 动画 slideToggle 与 angular 中继器一起使用

Question

我正在玩我的 toasts 版本，它看起来非常好，但是当我使用 jQuery slideToggle 为 angular 转发器项目输入和离开事件设置动画时，它仅适用于第一个元素在列表中。第一个进入动画，其余的不动画，当一个元素离开它时，只有当它在列表的最顶端时才会动画。

动画连接起来抛出一个angular动画，像这样。

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
}
});

转发器在这个（相当广泛的）模板的指令中。

<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>

看看我的 project githubpage 的行为。

如果您认为问题可能出在其他地方，可以在 github repo 找到完整的代码。

如果有任何反馈，我将不胜感激。

Answer 1

这是一个 CSS 问题。

对于您当前的 CSS，li 元素未包裹其内部 div 元素并且高度为零。

您将需要触发块格式化上下文。

There are multiple ways to do this.

一种方法是使用 overflow: auto:

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

演示： http://plnkr.co/edit/je1jKe64M2Sb2mJlC3Tp?p=preview

将 jquery 动画 slideToggle 与 angular 中继器一起使用

Using the jquery animation slideToggle with angular repeater

javascript

jquery

animation

angularjs