如何使这种过渡顺利而不是跳起来

Question

我试图在我的应用程序中实现一个通知系统，而不使用库。 以下是该问题的GIF： https ： //imgur.com/oRc11dM

这里是gif的jsfiddle： https ：//jsfiddle.net/w9yk7n54/

当您点击新的通知按钮时，已经显示的通知会跳起来为新通知腾出空间并且新通知会滑入。我想知道如何才能使它们顺利上升。

通知不会都是相同的尺寸，所以我不能设置高度/等静态值。

谢谢！

 let btn = document.querySelector('button') let container = document.querySelector('.notifications-container') let notif_contents = [ "<p>1</p><p>1</p><p>1</p><p>1</p>", "<p>test</p>", "<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>" ] let current = 0 btn.onclick = () => { let notif = document.createElement('div') notif.classList.add('notif') notif.innerHTML = notif_contents[current] notif.addEventListener('animationend', () => { notif.parentElement.removeChild(notif) }) current++ container.append(notif) } 

 * { box-sizing: border-box; } .container { height: 300px; width: 400px; border: 1px solid black; position: absolute; } .notifications-container { position: absolute; top: 0; right: 0; height: 100%; width: 200px; background: rgba( 0, 0, 0, 0.2); display: flex; flex-flow: column nowrap; justify-content: flex-end; overflow: hidden; } .notif { position: relative; width: 100%; padding: 10px; border: 1px solid black; animation: notifAnim 5s forwards; transition: all .2s; background: white; } button { z-index: 100; background: lightcoral; color: white; border: none; padding: 10px; font-size: 20px; margin: 5px; } @keyframes notifAnim { 0% { transform: translateY( 100%) } 20% { transform: translateY( 0) } 80% { transform: translateY( 0) } 100% { transform: translateY( 100%) } } 

 <div class="container"> <button>New Notification</button> <div class="notifications-container"></div> </div> 

Answer 1

您的notif容器具有justify-content: flex-end 。 这意味着无论何时添加新的，前一个都会以新的高度向上推。

“修复”是给每个元素一个负margin-top等于它的高度，并整合到当前的过渡中，使得margin-top回到0 。

例：

 let btn = document.querySelector('button'), container = document.querySelector('.notifications-container'), notif_contents = [ "<p>1</p><p>1</p><p>1</p><p>1</p>", "<p>test</p>", "<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>", "<code>another.test()</code>", "<strong>another</strong> <i>test</i>" ] btn.onclick = () => { let notif = document.createElement('div'), index = Math.floor(Math.random() * notif_contents.length) notif.classList.add('notif') notif.innerHTML = notif_contents[index] notif.addEventListener('animationend', () => { notif.parentElement.removeChild(notif) }) container.append(notif) notif.style.marginTop = '-' + notif.offsetHeight + 'px' } 

 * { box-sizing: border-box; } .container { height: 300px; width: 400px; border: 1px solid #888; position: absolute; } .notifications-container { position: absolute; top: 0; right: 0; height: 100%; width: 200px; background: rgba( 0, 0, 0, 0.2); display: flex; flex-flow: column nowrap; justify-content: flex-end; overflow: hidden; } .notif { position: relative; width: 100%; padding: 10px; border: 1px solid #ddd; border-bottom: none; animation: notifAnim 5s forwards; background: white; } button { z-index: 100; background: lightcoral; color: white; border: none; padding: 10px; font-size: 20px; margin: 5px; } @keyframes notifAnim { 0%, 100% { transform: translateY( 100%) } 20%, 80% { transform: translateY( 0); margin-top: 0 } } 

 <div class="container"> <button>New Notification</button> <div class="notifications-container"></div> </div> 

Answer 2

一个想法是插入高度等于0的新元素，除了翻译外，还可以为高度设置动画。 当然，您应该使用max-height因为高度未知，我们无法动画为auto：

 let btn = document.querySelector('button') let container = document.querySelector('.notifications-container') let notif_contents = [ "<p>1</p><p>1</p><p>1</p><p>1</p>", "<p>test</p>", "<div><h1>testtesttest</h1><p>yoloalsdfasdf</p></div>" ] let current = 0 btn.onclick = () => { let notif = document.createElement('div') notif.classList.add('notif') notif.innerHTML = notif_contents[current] notif.addEventListener('animationend', () => { notif.parentElement.removeChild(notif) }) current++ container.append(notif) } 

 * { box-sizing: border-box; } .container { height: 300px; width: 400px; border: 1px solid black; position: absolute; } .notifications-container { position: absolute; top: 0; right: 0; height: 100%; width: 200px; background: rgba( 0, 0, 0, 0.2); display: flex; flex-flow: column nowrap; justify-content: flex-end; overflow: hidden; } .notif { position: relative; width: 100%; padding:0 10px; max-height:0px; border: 1px solid black; animation: notifAnim 5s forwards; transition: all .2s; background: white; } button { z-index: 100; background: lightcoral; color: white; border: none; padding: 10px; font-size: 20px; margin: 5px; } @keyframes notifAnim { 0% { transform: translateY( 100%); max-height:0; padding:0 10px; } 30% { transform: translateY( 0); max-height:300px; padding:10px; } 80% { transform: translateY( 0); max-height:300px; padding:10px; } 100% { transform: translateY( 100%); max-height:300px; padding:10px; } } 

 <div class="container"> <button>New Notification</button> <div class="notifications-container"></div> </div>