Elementor Pro 3.32 Уменьшенные предпочтения движения ⇐ Html

[Anonymous]

В Elementor 3.32 pro конструктор теперь полностью учитывает предпочтения пользователя относительно ограниченного движения. Это означает, что эффекты движения не активируются, когда включено ограничение движения.
Я управляю школьным веб-сайтом, и из-за этого изменения все анимации и эффекты на школьных компьютерах отключаются. Это немного смешно, и, похоже, нет никакого способа включить или выключить это поведение.
Я понимаю важность специальных возможностей, но в нашем случае школьные компьютеры отключают анимацию и эффекты движения из соображений скорости и эффективности, а не из соображений доступности. В результате сайт выглядит плоским и не работает должным образом.
Можем ли мы включить или отключить эту функцию? Я придумал обходной путь, но он далек от идеала. Есть ли другое решение?
Возможное решение
(function() { // Проверяем, действительно ли включено уменьшенное движение const hasReducedMotion = window.matchMedia('(prefers-reduced-motion: уменьшить)').matches; // ТОЛЬКО переопределяем, если обнаружено уменьшенное движение if (hasReducedMotion) { const originalMatchMedia = window.matchMedia; window.matchMedia = function(query) { if (query.includes('prefers-reduced-motion')) { return {matches: false, media: query, addEventListener: () => {}, RemoveEventListener: () => {}, addListener: () => {}, RemoveListener: () => {}} } return originalMatchMedia(query }); fixAnimations() { // Исправляем только в том случае, если обнаружено замедленное движение if (!hasReducedMotion) return; // Исправляем анимацию входа document.querySelectorAll('.elementor-invisible').forEach(el => { el.classList.remove('elementor-invisible'); }); // Исправляем ВСЕ ваши пользовательские флип-карты document.querySelectorAll('.timetable-card-3d, .contactinfo-card-3d, .termdates-card-3d').forEach(card => { card.style.transition = 'transform 0,8s cubic-bezier(0.4, 0.0, 0.2, 1)'; card.style.transformStyle = 'preserve-3d'; }); // Немедленно исправить Max Mega Menu document.querySelectorAll('.mega-menu, .mega-menu-wrap') = 'непрозрачность 0,3 секунды, видимость 0,3 секунды'; }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => setTimeout(fixAnimations, 50)); } else { setTimeout(fixAnimations, 50 } window.addEventListener('load', ()); => setTimeout(fixAnimations, 100 })(); /* Эти исправления применяются ТОЛЬКО при обнаружении уменьшенного движения */@media(prefers-reduced-motion: уменьшить) { /* Принудительно использовать ВСЕ анимации */ * {animation-duration: inherit !important; анимация-play-state: работает !important; продолжительность перехода: наследовать !важно; } /* Max Mega Menu — АГРЕССИВНОЕ ИСПРАВЛЕНИЕ */ .mega-menu, .mega-menu *, .mega-menu-wrap, .mega-menu-wrap *, .mega-sub-menu {animation-duration: 0.3s !important; переход: непрозрачность, легкость 0,3 с, видимость, легкость 0,3 с, трансформация, легкость 0,3 с !важно; } /* Анимация входа */ .elementor-invisible { opacity: 0 !important; видимость: видимая !важно; } [class*="elementor-animation-"] {animation-duration: 0,6 с !important; } /* Кнопки общего доступа */ .elementor-share-buttons * { переход: все 0,3 секунды легко !important; анимация-длительность: 0,6 с! важно; } /* Динамическая галерея основных дополнений */ .eael-filter-gallery-wrapper, .eael-filter-gallery-wrapper *, .eael-filterable-gallery-item, .eael-gallery-grid-item, .eael-fg-item-wrap { переход: все 0,5 секунды легко !important; анимация-длительность: 0,5 с! важно; } /* Горячие точки изображений Essential Addons — ИСПРАВЛЕНИЕ ИНСТРУМЕНТОВ */ .eael-hot-spot-tooptip, .eael-hot-spot-tooltip, .eael-hot-spot-tooptip-text, .eael-tooltip, [class*="eael-hot-spot"] [class*="tooltip"] { переход: легкость непрозрачности 0,3 секунды, легкость видимости 0,3 секунды !важно; анимация-длительность: 0,3 с! важно; } /* По умолчанию скрыть всплывающие подсказки для горячих точек */ .eael-hot-spot-tooptip:not(:hover), .eael-hot-spot-tooltip:not(:hover) { opacity: 0 !important; видимость: скрыта !важно; } /* Показать при наведении */ .eael-hot-spot-tooptip:hover, .eael-hot-spot-tooltip:hover, .eael-hot-spot:hover .eael-hot-spot-tooptip, .eael-hot-spot:hover .eael-hot-spot-tooltip { opacity: 1 !important; видимость: видимая !важно; } /* Раскладной блок основных дополнений */ .eael-elements-flip-box-container, .eael-flip-box-container { перспектива: 1000px !important; } .eael-elements-flip-box-flip-card, .eael-flip-box, .eael-flip-box-inner { переход: преобразование 0,6 секунды легко !важно; стиль трансформации: save-3d !important; } .eael-elements-flip-box-front-container, .eael-elements-flip-box-rear-container, .eael-flip-box-front, .eael-flip-box-back { backface-visibility: скрыто !important; стиль трансформации: save-3d !important; переход: трансформация 0,6 с легкость !важно; } .eael-elements-flip-box-front-container {transform: RotateY(0deg) !important; } .eael-elements-flip-box-rear-container { Transform: RotateY(180deg) !important; } .eael-elements-flip-box-container:hover .eael-elements-flip-box-flip-card { Transform: RotateY(180deg) !important; } /* ВСЕ ваши пользовательские раскладные карточки */ .timetable-card-3d, .contactinfo-card-3d, .termdates-card-3d { переход: трансформация 0,8 с кубический-безье(0,4, 0,0, 0,2, 1) !important; стиль трансформации: save-3d !important; } .timetable-card-face, .contactinfo-card-face, .termdates-card-face { backface-visibility: скрыто !important; стиль трансформации: save-3d !important; переход: трансформация 0,8 с легкость !важно; } /* Раскладные коробки Elementor — НОВИНКА */ .e-flip-box { Perspective: 1000px !important; } .e-flip-box__layer { переход: трансформация 0,6 с легкость !важно; стиль трансформации: save-3d !important; backface-visibility: скрыто !important; } .e-flip-box__layer--front { Transform: RotateY(0deg) !important; } .e-flip-box__layer--back { Transform: RotateY(180deg) !important; } .e-flip-box:hover .e-flip-box__layer--front { Transform: RotateY(-180deg) !important; } .e-flip-box:hover .e-flip-box__layer--back { Transform: RotateY(0deg) !important; } /* Раскладные коробки Elementor — СТАРЫЕ */ .elementor-flip-box { Perspective: 1000px !important; } .elementor-flip-box__front, .elementor-flip-box__back { переход: преобразование 0,6 секунды легко !важно; стиль трансформации: save-3d !important; backface-visibility: скрыто !important; } .elementor-flip-box__front { Transform: RotateY(0deg) !important; } .elementor-flip-box__back { Transform: RotateY(180deg) !important; } .elementor-flip-box:hover .elementor-flip-box__front { Transform: RotateY(-180deg) !important; } .elementor-flip-box:hover .elementor-flip-box__back { Transform: RotateY(0deg) !important; } }

Подробнее здесь: https://stackoverflow.com/questions/798 ... preference