加载页面时哇JS隐藏元素

Posted 2023-02-22

【中文标题】加载页面时哇JS隐藏元素

【英文标题】：Wow JS hiding elements when page is loaded

【发布时间】：2019-03-28 23:38:09

【问题描述】：

我有一个 div 元素，我想在滚动时滑出。我已经应用了 slideOutLeft 动画并包含了 data-wow-offset 参数并且动画本身可以工作，但不幸的是，当我最初加载页面时，动画元素被隐藏了。该元素应该从可见开始，然后向左滑出并隐藏。不知道为什么这不起作用。

 @-webkit-keyframes slideOutLeft 
  from 
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  

  to 
    visibility: hidden;
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  

【问题讨论】：

您是否尝试在 from 块中添加 visibility: visible？否则，您可以改用opacity。

嗨@zfrisch，是的，我尝试添加可见性：可见和不透明度：1 > 不透明度：0，但仍然不想工作。也很奇怪，我见过的所有 wow 示例（甚至在 wow 网站上）都没有演示 slideOut 功能，只有 slideIn。我的目标是创建一个 div 网格，当用户向下滚动时会分离。没想到这会是 animate/wow 的问题...

【参考方案1】：

我通过Github convo 找到了解决相同问题的方法

我刚刚添加了：

    .wow 
visibility: visible !important;

到我的 css 文件，并且该元素在页面加载时不再隐藏。