[DOC] Point out that only animation is supported

[Massi-X]

Hi guys, while deploying the library I needed to create a custom animation for show and hide, so I started creating my own css class (I'm not using animate.css), only to later find out that transition is not supported causing all kind of bugs (the popup will close but swal will not remove the classes from the html element or correctly update it's state). This is fine but I think it should be better pointed out in the README and example page so that it does not create confusion (cause I was thinking animation = transition). What do you think?

[limonte]

Hello @Massi-X and sorry for the late reply. I'm not quite sure what you mean. Could you provide some code examples of the cases that aren't working as expected?

[Massi-X]

Sure here you go. This is the code I'm using right now and it works fine. The thing that wasn't obvious to me is that you need to actually use an animation (keyframes) and not a simple transition like I used before. I think it is important to point out that in the docs, do you agree?

CSS:

        Swal.fire({
                title: details.title,
                html: details.html,
                showConfirmButton: details.showConfirmButton,
                returnFocus: false,
                showClass: {
                        backdrop: 'fadein',
                        popup: 'somethingelse'
                },
                hideClass: {
                        backdrop: 'fadeout',
                        popup: 'somethingelse'
                }
        });

CSS:

.swal2-container.fadein {
        animation: .25s swal-fadein linear;
}

.swal2-container.fadeout {
        animation: .25s swal-fadeout linear;
}

@keyframes swal-fadein {
        0% {
                background: transparent;
        }

        10% {
                background: transparent;
        }

        100% {
                background: rgba(0, 0, 0, var(--cc-overlay-opacity));
        }
}

@keyframes swal-fadeout {
        0% {
                background: rgba(0, 0, 0, var(--cc-overlay-opacity));
        }

        100% {
                background: transparent;
        }
}