Question

我正在玩我的吐司版本，它看起来非常好，但是当我设置角度转发器项目的动画时，使用jQuery slideToggle进入和离开事件它只适用于列表中的第一个元素。第一个进入动画，其余的没有，当一个元素离开它时，只有它是动画，如果它是列表中的最顶层。

动画连接起来投掷角度动画，就像这样。

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

1 个答案: