diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/css/conversation.css | 10 | ||||
| -rw-r--r-- | view/js/main.js | 25 |
2 files changed, 22 insertions, 13 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css index d8a893b0e..52e83a54d 100644 --- a/view/css/conversation.css +++ b/view/css/conversation.css @@ -197,6 +197,16 @@ a.wall-item-name-link { position: relative; } +.item-fade-in { + opacity: 0; + transform: scale(.7) translateY(-20px); + transition: opacity 0.3s ease-out, transform 0.3s ease-out; +} +.item-fade-in.show { + opacity: 1; + transform: scale(1) translateY(0); +} + .item-highlight:after { content: ''; position: absolute; diff --git a/view/js/main.js b/view/js/main.js index e95ba22d8..f9ed5059c 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -1426,26 +1426,25 @@ function request(id, mid, verb, parent, uuid) { function injectWithAnimation(containerId, parsedDoc, overwrite = false) { const container = document.getElementById(containerId); if (!container) return; - - if (overwrite) { - container.innerHTML = ''; - } + if (overwrite) container.innerHTML = ''; const newElements = Array.from(parsedDoc.body.children); for (let i = newElements.length - 1; i >= 0; i--) { const el = newElements[i].cloneNode(true); + el.classList.add('item-fade-in'); container.insertBefore(el, container.firstChild); - el.animate([ - { opacity: 0, transform: 'scale(.7) translateY(-20px)' }, - { opacity: 1, transform: 'scale(1) translateY(0)' } - ], { - duration: 300, - delay: (newElements.length - 1 - i) * 50, - fill: 'none', - easing: 'ease-out' - }); + // Remove classes after transition ends + const onTransitionEnd = (event) => { + el.classList.remove('item-fade-in', 'show'); + el.removeEventListener('transitionend', onTransitionEnd); + }; + el.addEventListener('transitionend', onTransitionEnd); + + setTimeout(() => { + el.classList.add('show'); + }, (newElements.length - 1 - i) * 30); } } |