html - Angular 动画通知水平堆叠

Question

我整天都在搜索，但没有找到解决此问题的方法。诚然，我对 Angular (和一般编码)非常陌生，但我发现的每个指南似乎都不起作用。

我正在尝试在屏幕顶部从右侧滑入显示小的通知消息(固定位置)。如果第二个通知在第一个通知消失(或手动关闭)之前出现，那么它会将第一个通知推到右边。这将在屏幕顶部水平显示所有通知。

我是否缺少一种简单的方法来做到这一点？那里有有用的指南或类似内容的片段吗？

我真的没有任何代码可以展示，因为我什至找不到起点。

Answer 1

这就是你的意思吗:

(注意 下面的例子在这个阶段没有使用 AngularJS)

var n = 0;
var notifications = document.getElementsByClassName('notification');
var button = document.getElementsByTagName('button')[0];

function addNotification() {
    if (n > (notifications.length - 1)) return;
    
    notifications[n].style.transform = 'translateX(0)';
    
    for (var i = (n - 1); i > -1; i--) {
        notifications[i].style.transform = 'translateX(' + ((n - i) * (1 + 120 + 1 + 4)) + 'px)';
    }
    
    n++;
}

button.addEventListener('click', addNotification, false);

body {
overflow-x: hidden;
}

.notification {
position: absolute;
top: 6px;
left: 6px;
display: inline-block;
width: 120px;
height: 24px;
line-height: 24px;
color: rgb(255, 255, 255);
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
background-color: rgb(223, 0, 0);
border: 1px solid rgb(191, 0, 0);
box-shadow: 2px 2px 2px rgb(0, 0, 0, 0.4);
transform: translateX(200vw);
transition: transform 1s ease-out;
}

button {
margin-top: 36px;
cursor: pointer;
}

<div class="notification">Notification 1</div>
<div class="notification">Notification 2</div>
<div class="notification">Notification 3</div>
<div class="notification">Notification 4</div>

<button type="button">Add Notification</button>