加载页面时哇JS隐藏元素答案

【问题标题】：Wow JS hiding elements when page is loaded加载页面时哇JS隐藏元素
【发布时间】：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 的问题...

标签： javascript css animation animate.css wow.js

【解决方案1】：

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

我刚刚添加了：

    .wow {
visibility: visible !important;
}

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

【讨论】：