使用GeneratePress与PageLayer的WordPress页面内容左滑入，如何关闭？

问题分析 #

你遇到的左侧滑入效果大概率是PageLayer插件添加的入场动画（GeneratePress主题默认无此类全局动画），仅添加transition: none;无效，因为这类动画通常是通过CSS关键帧（@keyframes）实现的，而非过渡属性。

修复步骤 #

1. 直接在PageLayer插件中关闭动画 #

这是最简便的解决方式：

• 进入WordPress后台，打开PageLayer编辑器并加载出现滑入效果的页面
• 选中对应的区块或内容元素，在右侧设置面板中找到「动画」「入场效果」类选项
• 将入场动画设置为「无」或直接禁用，保存后刷新页面验证效果

2. 用自定义CSS强制覆盖动画 #

如果插件设置中找不到关闭入口，可通过自定义CSS强制取消动画：

• 进入后台「外观」→「自定义」→「额外CSS」
• 添加以下代码（可根据实际元素类名调整）：

  /* 全局禁用PageLayer元素的动画 */
  .pl-element, .pl-section {
      animation: none !important;
      transition: none !important;
      transform: none !important;
  }
  
  /* 若需精准定位特定元素，可通过浏览器开发者工具获取类名/ID后单独覆盖 */
  /* 示例：#target-section { animation: none !important; } */
  

• 保存设置后刷新页面，确认动画是否消失

3. 定位并覆盖关键帧动画 #

若上述CSS仍无效，可通过浏览器开发者工具定位具体动画规则：

• 打开网站按F12进入开发者工具，选中滑入的元素
• 在「样式」面板中查找带有animation属性的规则，记录对应的关键帧名称（如slide-in-left）
• 在自定义CSS中添加针对该关键帧的覆盖：

  @keyframes slide-in-left {
      0%, 100% { transform: translateX(0); }
  }
  

内容的提问来源于stack exchange，提问作者Tzuriel