我一整天都在寻找找不到办法的方法。当然,我对角度(和一般编码)非常新,但我发现的每一个指南似乎都不起作用。
我正试图在屏幕顶部从右侧滑入显示小的通知消息(固定位置)。如果在第一个通知消失(或手动关闭)之前出现第二个通知,则它会向右推送第一个通知。这将在屏幕顶部水平显示所有通知。
我错过了一个简单的方法吗?是否有一个有用的指南,或类似的片段?
我真的没有任何代码可以展示,因为我甚至找不到起点。
答案 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>