我正在玩我的吐司版本,它看起来真的很不错,但是当我使用 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">×</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