Jump to content
dgmldr

Opacity fade out appears to end abruptly with onComplete callback

Recommended Posts

Hello,

 

I've discovered a problem when using an opacity animation to 0 along with an onComplete callback that removes the tweened element from the DOM. What essentially I'm experiencing is that the element fades a little bit and then suddenly disappears. Almost as if the onComplete fires before the element reaches 0 opacity.  Click either of the top left buttons to demo.

 

I've found a workaround to adds a timeout to the onComplete callback, delaying the removal of the tweened element by a multiple of the animation duration. Click either of the bottom left buttons to demo. Although the fade-out is smooth and looks right, the hack solution is not desirable. What can be possibly causing the element to "pop" off the page instead of appearing to fade all the way to 0 before onComplete fires

 

Thanks,

DouG

See the Pen e40d4b287e39a021a18c3520e901188b by dgmldrsf (@dgmldrsf) on CodePen

Share this post


Link to post
Share on other sites

Hi @dgmldr,

 

Please have a look to your CSS

 

.slds-notification {
    position: relative;
    width: 20rem;
    border: 1px solid #ecebea;
    border-radius: .25rem;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
    transition-duration: .4s;
    transition-timing-function: ease-in-out;
    transition-property: margin,max-height,opacity,top;
  

  
  

 

If you try ...

 

.slds-notification {
    position: relative;
    width: 20rem;
    border: 1px solid #ecebea;
    border-radius: .25rem;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
    /* transition-duration: .4s; */
    /* transition-timing-function: ease-in-out; */
    /* transition-property: margin,max-height,opacity,top; */
}

 

 you will have a clear responsibility for the job - done by GreenSock.

 

Kind regards

Mikel

 

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you @mikel

I still need the other CSS property transitions, so I pulled just the opacity transition and it works great!

 

.slds-notification {
    position: relative;
    width: 20rem;
    border: 1px solid #ecebea;
    border-radius: .25rem;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
    transition-duration: .4s;
    transition-timing-function: ease-in-out;
    /* transition-property: margin,max-height,opacity,top; */
    transition-property: margin,max-height,top;
}

 

Greatly appreciated

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.