Question

我一整天都在寻找找不到办法的方法。当然，我对角度（和一般编码）非常新，但我发现的每一个指南似乎都不起作用。

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

我错过了一个简单的方法吗？是否有一个有用的指南，或类似的片段？

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

Answer 1

这是你的意思吗？

（ N.B。 以下示例在此阶段不使用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>

角动画通知水平堆叠

1 个答案: