[FIX] website_animate: fix animation in mega menu

Backport of [1].

Before this commit, the animations were never launched in a mega menu.

Indeed the animations are launched when the element to be animated
appears in the viewport according to the scroll. But in the case of a
mega menu we just want the animation to start when the mega menu is
opened. For that we don't need all the code that checks the scroll, etc.
The animation starts by itself when the element inside the mega menu is
made visible in CSS.

This commit also removes the "Each time it becomes visible" option for
an element animated in a mega menu because in this case this option does
not make sense.

[1]: https://github.com/odoo/odoo/commit/bae04041a528e1a1fe97387ca5b75943c1d0fe97

opw-2764895

closes odoo/design-themes#561

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

website_animate/static/src/js/o_animate.editor.js

@@ -43,5 +43,22 @@ sOptions.registry.o_animate = sOptions.Class.extend({
             this.$target.toggleClass('o_animate_preview o_animate', !!widgetValue);
         }
     },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        const classes = params.optionsPossibleValues.selectClass;
+        if (classes && classes.includes('o_animate_both_scroll')) {
+            // Hide the "Each time it becomes visible" option if the target is
+            // inside a dropdown (e.g. mega menu).
+            return !this.$target.closest('.dropdown').length;
+        }
+        return this._super(...arguments);
+    },
 });
 });

website_animate/static/src/js/o_animate.frontend.js

@@ -17,6 +17,10 @@ var WebsiteAnimate = {
         self.items = $("#wrapwrap .o_animate");
         self.items.each(function () {
             var $el = $(this);
+            if ($el[0].closest('.dropdown')) {
+                $el[0].classList.add('o_animate_in_dropdown');
+                return;
+            }
             // Set all monitored elements to initial state
             self.reset_animation($el);
         });
@@ -48,7 +52,7 @@ var WebsiteAnimate = {
             var direction = (windowTop < lastScroll) ? -1 : 1;
             lastScroll = windowTop;
 
-            $("#wrapwrap .o_animate").each(function () {
+            $("#wrapwrap .o_animate:not(.o_animate_in_dropdown)").each(function () {
                 var $el       = $(this);
                 var elHeight  = $el.height();
                 var elOffset  = direction * Math.max((elHeight * self.offsetRatio), self.offsetMin);
@@ -152,7 +156,7 @@ publicWidget.registry.WebsiteAnimate = publicWidget.Widget.extend({
         this._super.apply(this, arguments);
 
         this.$target.find('.o_animate')
-            .removeClass('o_animating o_animated o_animate_preview')
+            .removeClass('o_animating o_animated o_animate_preview o_animate_in_dropdown')
             .css({
                 'animation-name': '',
                 'animation-play-state': '',

website_animate/static/src/scss/o_animate_frontend.scss

@@ -11,7 +11,7 @@
     text-rendering: geometricPrecision; // take care of animated titles
     visibility: hidden;
 
-    &:not(.o_animating) {
+    &:not(.o_animating):not(.o_animate_in_dropdown) {
         transform: none !important;
     }
 }