v.3 and transition effect

[osworx]

v.2 had an option
transition: 'slide' // zoom/slide

Am I correct when I say that with v.3 this option is gone?
If true, will it be added?
And if not, adding some custom transition has to be done via CSS?

[orestbida]

Yes, its gone and very likely won't be added as a config. option, but I'll see if I can add 1-2 css variables to make it a bit easier to customize!

[osworx]

Yes, its gone and very likely won't be added as a config. option, but I'll see if I can add 1-2 css variables to make it a bit easier to customize!

Thx in advance.

[orestbida]

@osworx unfortunately this looks to be much more complex than just adding a few css variables.

The transition (transform) is different for each modal position/layout. You have to take into account the mobile/desktop's slight layout changes too. It would require too much css (about 50-60 lines) to make the zoom transition work properly for all layouts/positions, which — I now recall — was the reason why I did not implement the zoom transition.

If you want to change the transition to zoom, you can, though it might be better to change it just for your current layout/position, to keep the custom css at minimum. This also means that if you later change the layout/position, you might have to adapt your custom css rules.

To overwrite the default transition, I'd recommend using specific selectors; for example, if you're using box/bottom left for the consent modal:

/* hidden */
#cc-main .cm.cm--box {
    transform: scale(.96)!important;
}

/* visible */
.show--consent #cc-main .cc--anim .cm.cm--box{
    transform: scale(1)!important;
}

Note: the above example won't work if you use box/middle left or some other layout/position combinations.

for the preferences modal you must distinguish between mobile/desktop layout:

/* hidden */
 #cc-main .pm.pm--box {
    opacity: 0;
    transform: translateY(-50%) scale(.97)!important;
}

/* visible */
.show--preferences #cc-main .cc--anim .pm.pm--box {
    transform: translateY(-50%) scale(1)!important;
}

@media screen and (max-width: 640px) {
    /* mobile hidden */
    #cc-main .pm.pm--box {
        transform: scale(.97)!important;
    }

    /* mobile visible */
    .show--preferences #cc-main .cc--anim .pm.pm--box {
        transform: scale(1)!important;
    }
}

[osworx]

Thanks for answering with samples.
E.g. zoom effect must not be available in all positions, some (as shown above) are enough.