角动画通知水平堆叠

时间:2017-12-02 21:40:38

标签: html css angularjs

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

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

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

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

1 个答案:

答案 0 :(得分:0)

这是你的意思吗?

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>