Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add fade-in animation

Browse Source 
[MAILPOET-3088]
This commit is contained in:
Pavel Dohnal
2020-09-10 09:14:31 +02:00
committed by Veljko V
parent 23e732bde4
commit 13804c7de7
2 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/src/components-public/_animation.scss
View File

@@ -30,3 +30,31 @@
transform: translateY(0); transform: translateY(0);
} }
} }
.mailpoet_form_animation_fadein {
animation: fade-in 1s 1 cubic-bezier(.77, 0, .175, 1);
}
.mailpoet_form_overlay_animation_fadein {
animation: fade-in-overlay 1s 1 cubic-bezier(.77, 0, .175, 1);
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in-overlay {
0% {
opacity: 0;
}
100% {
opacity: .7;
}
}

1
assets/js/src/public.jsx
View File

@@ -88,6 +88,7 @@ jQuery(($) => {
const animation = form.data('animation'); const animation = form.data('animation');
if (animation !== '') { if (animation !== '') {
formDiv.addClass(`mailpoet_form_animation_${animation}`); formDiv.addClass(`mailpoet_form_animation_${animation}`);
formDiv.prev('.mailpoet_form_popup_overlay').addClass(`mailpoet_form_overlay_animation_${animation}`);
} }
const background = form.data('background-color'); const background = form.data('background-color');
formDiv.css('background-color', background || 'white'); formDiv.css('background-color', background || 'white');