使用 jquery 动画幻灯片使用角度中继器切换

Using the jquery animation slideToggle with angular repeater

本文关键字：中继器 jquery 动画 幻灯片 使用      更新时间：2023-09-26

我正在玩我的吐司版本，它看起来真的很不错，但是当我使用 jQuery slideSwitch 对角度中继器项目进入和离开事件进行动画处理时，它仅适用于列表中的第一个元素。第一个进入动画，其余的没有，当一个元素离开时，它只有在列表中最顶部时才动画。

动画

被勾搭起来扔了一个棱角分明的动画，像这样。 

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>

看看我的项目githubpage上的行为。

如果您认为问题可能出在其他地方，则可以在 github 存储库中找到整个代码。

我将不胜感激任何和所有反馈。

这是一个

CSS问题。

使用当前的 CSS，li 元素不会包装其内部div元素，并且高度为零。

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

有多种方法可以做到这一点。

一种方法是使用overflow: auto：

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

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

相关文章：