Smoothen CSS animations
This commit is contained in:
parent
c32e320c1a
commit
d7e9044c71
3 changed files with 16 additions and 4 deletions
|
@ -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`
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="open-read-view-wrap">
|
||||
<button
|
||||
v-if="unreadMessageCount"
|
||||
class="button clear-button"
|
||||
|
|
Loading…
Reference in a new issue