Smoothen CSS animations

This commit is contained in:
Nithin David 2021-08-12 18:35:41 +05:30
parent c32e320c1a
commit d7e9044c71
3 changed files with 16 additions and 4 deletions

View file

@ -185,9 +185,19 @@ export const IFrameHelper = {
const unreadMessageWrap = iframe.contentWindow.document.querySelector(
'.unread-messages'
);
const unreadCloseWrap = iframe.contentWindow.document.querySelector(
'.close-unread-wrap'
);
const readViewWrap = iframe.contentWindow.document.querySelector(
'.open-read-view-wrap'
);
if (!unreadMessageWrap) return;
const scrollableMessageHeight = unreadMessageWrap.scrollHeight + 80;
let scrollableMessageHeight = unreadMessageWrap.scrollHeight;
if (unreadCloseWrap)
scrollableMessageHeight += unreadCloseWrap.scrollHeight;
if (readViewWrap) scrollableMessageHeight += readViewWrap.scrollHeight;
const updatedIframeHeight = message.isFixedHeight
? `${scrollableMessageHeight}px`

View file

@ -1,10 +1,11 @@
export const SDK_CSS = `.woot-widget-holder {
box-shadow: 0 5px 40px rgba(0, 0, 0, .16) !important;
opacity: 1;
will-change: transform, opacity;
transform: translateY(0);
overflow: hidden !important;
position: fixed !important;
transition: opacity 0.2s, transform 0.25s;
transition: opacity 0.2s linear, transform 0.25s linear;
z-index: 2147483000 !important;
}
@ -110,7 +111,8 @@ export const SDK_CSS = `.woot-widget-holder {
}
.woot--hide {
transform: translateY(100vh);
bottom: -100vh;
transform: translateY(40px);
top: unset !important;
opacity: 0;
visibility: hidden !important;

View file

@ -23,7 +23,7 @@
/>
</div>
<div>
<div class="open-read-view-wrap">
<button
v-if="unreadMessageCount"
class="button clear-button"