When using Animate.css and zoomInUp, or any Animate.css zoom animation, the element ends up with opacity: 0

09Ria09 commented 5 years ago

This is:

Bug

Specifications

AOS version: v3.0.0-beta.6
OS: Win10
Browser: Firefox

Expected Behavior

the element should stay visible after the animation ends

Actual Behavior

the element's opacity is set to 0 by this:

html:not(.no-js) [data-aos^="zoom"][data-aos^="zoom"] {
    opacity: 0;
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
}

Steps to Reproduce the Problem

Include animate.css: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

Set:

AOS.init({
    useClassNames: true,
    initClassName: false,
    animatedClassName: 'animated'
});

Set element's: data-aos="zoomInUp
Scroll to the element

Possible Solution

Check if animatedClassName is set to default before applying

html:not(.no-js) [data-aos^="zoom"][data-aos^="zoom"] {
    opacity: 0;
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
}

destiny0114 commented 5 years ago

how to fix?