Elementor - 滚动“运动效果”在调整窗口大小之前不起作用答案

【问题标题】：Elementor - Scrolling "motion-effects" not working until window resizedElementor - 滚动“运动效果”在调整窗口大小之前不起作用
【发布时间】：2019-11-20 14:56:05
【问题描述】：

我对某些图像有滚动效果，一些放大，使用水平、垂直滚动和其他一些效果。除非发生以下两种情况之一，否则滚动动作不会被初始化： 1) 调整浏览器窗口的大小（宽度或高度）。 2）您再次访问该页面或它已刷新。这发生在所有浏览器中。

编辑：一些滚动效果似乎已初始化，但在它进入视口之前触发（因此你看不到它）。

示例视频：

如何复制：https://www.youtube.com/watch?v=U9vlteH691U
示例 1：https://www.youtube.com/watch?v=a9YGIkgRF_Q
示例 2：https://www.youtube.com/watch?v=JgSKObKfVOU

注意：如果您希望多次复制问题，则必须访问带有隐身页面的页面。如果它再次开始工作，请尝试使用新浏览器或新标签。

影响滚动的页面 URL（大多数部分位于“网页设计”下）：

https://rory-dwyer.com/hk-electrical-engineers/ - 笔记本电脑、手机和网站截图部分

https://rory-dwyer.com/simpliii/ - 在品牌元素和视频之间

https://rory-dwyer.com/bridge-city-ballroom-dance/ - 手机入口动画、网站截图

https://rory-dwyer.com/jgarloff-design/ - 电脑、手机和网站截图

https://rory-dwyer.com/apo11o/ - 网页设计下的手机

我尝试过的事情：

禁用所有插件
使用股票主题
禁用页眉和页脚脚本注入
删除 Elementor 导航和页脚部分
搜索和替换 http -> https
从头开始重建页面（使用 Elementor 制作的页面模板）
回滚 Elementor 版本
在实时服务器（从头开始）而不是本地环境上从头开始重建站点
禁用所有全局模板
删除所有自定义 CSS 和 JS

【问题讨论】：

我也有同样的问题，但在我的情况下，它不适用于元素的 gallery 元素，否则运动效果可以正常工作，我认为它与画廊或其中一些 css 有问题，我在一些与此相关的 wordpress 问题中有红色，有人告诉它是由于外部或内部边距/填充而发生的。
我也遇到了同样的问题...在文本 div 上启用了运动效果。加载时某些元素不会显示，除非您调整浏览器的大小。我试图将效果设置为无，但似乎它一直在应用效果。

标签： javascript html css wordpress elementor

【解决方案1】：

转到 Jetpack 插件中的 Jetpack 设置。转到性能选项卡。向下滚动页面并禁用“延迟加载”

Image of disabled "lazy loading" in the Jetpack plugin.

【讨论】：

【解决方案2】：

有这个问题的朋友可以试试这个。

如果您使用的是 Windows 10。可能您关闭了show animations on windows。在 Windows 10 中通过设置 display settings 将其打开。

【讨论】：

【解决方案3】：

找到你 Elementor 的 css 文件 frontend.min.css 并删除这部分 css：

@media (prefers-reduced-motion:reduce) {
    .animated {
        -webkit-animation: none;
        animation: none
    }
}

这部分 css 告诉浏览器在操作系统更喜欢减少运动时禁用动画，因此删除这部分 css 将强制动画在所有操作系统上显示。如果您想保留这部分 css 并希望在某些 PC 上显示它，那么您可以在该 PC 上的设置中打开动画 - 要在 Windows 10 上打开动画，请转到设置 > 轻松访问 > 显示 > 简化和个性化 Windows，然后打开在 Windows 中显示动画。

【讨论】：