From 2f87046f561907ab788cfcedce26f5d0259861fc Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 21 Apr 2022 14:17:52 +0000
Subject: [PATCH] [FIX] website: fix animation in mega menu

Before this commit, the animations were never launched in a mega menu
with the navbar option "sub menus = on hover" enabled.

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.

A first attempt to fix this was made by this commit [1], but this fix
was wrong. Indeed, as explained above, animations in a dropdown do not
need to be triggered on scroll. And moreover, it didn't work properly
because the animations were never reset when the dropdown was closed.

[1]: https://github.com/odoo/odoo/commit/7a96557b839a69a9d44aac4242af2d21bc7f0e38

opw-2764895

closes odoo/odoo#90826

X-original-commit: bae04041a528e1a1fe97387ca5b75943c1d0fe97
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/content/snippets.animation.js | 17 ++++++++---------
 addons/website/static/src/scss/website.scss     |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 4597c7bac23..beb0e205fa4 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1196,6 +1196,10 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
         // Render elements and trigger the animation then pause it in state 0.
         this.$animatedElements = this.$target.find('.o_animate');
         _.each(this.$animatedElements, el => {
+            if (el.closest('.dropdown')) {
+                el.classList.add('o_animate_in_dropdown');
+                return;
+            }
             this._resetAnimation($(el));
         });
         // Then we render all the elements, the ones which are invisible
@@ -1209,14 +1213,9 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
         this.__onScrollWebsiteAnimate = _.throttle(this._onScrollWebsiteAnimate.bind(this), 200);
         this.$scrollingElement[0].addEventListener('scroll', this.__onScrollWebsiteAnimate, {capture: true});
 
-        $(window).on('resize.o_animate, shown.bs.modal.o_animate, slid.bs.carousel.o_animate, shown.bs.dropdown.o_animate', () => {
+        $(window).on('resize.o_animate, shown.bs.modal.o_animate, slid.bs.carousel.o_animate', () => {
             this.windowsHeight = $(window).height();
-            let $scrollingElement = this.$scrollingElement;
-            const $openDropdown = $('.dropdown-menu.show:has(.o_animate)');
-            if ($openDropdown.length) {
-                $scrollingElement = $openDropdown;
-            }
-            this._scrollWebsiteAnimate($scrollingElement[0]);
+            this._scrollWebsiteAnimate(this.$scrollingElement[0]);
         }).trigger("resize");
 
         return this._super(...arguments);
@@ -1227,7 +1226,7 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
     destroy() {
         this._super(...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': '',
@@ -1314,7 +1313,7 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
         const direction = (scroll < this.lastScroll) ? -1 : 1;
         this.lastScroll = scroll;
 
-        _.each(this.$target.find('.o_animate'), el => {
+        _.each(this.$target.find('.o_animate:not(.o_animate_in_dropdown)'), el => {
             const $el = $(el);
             const elHeight = $el.height();
             const elOffset = direction * Math.max((elHeight * this.offsetRatio), this.offsetMin);
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index c41210a56ed..6b0f44e5f23 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1543,7 +1543,7 @@ ul.o_checklist > li.o_checked::after {
     text-rendering: geometricPrecision; // take care of animated titles
     visibility: hidden;
 
-    &:not(.o_animating) {
+    &:not(.o_animating):not(.o_animate_in_dropdown) {
         transform: none !important;
     }
 }