CSS 动画在 wow js 中无法正常工作

Posted 2023-03-05

【中文标题】CSS 动画在 wow js 中无法正常工作

【英文标题】：CSS Animation not working properly in wow js

【发布时间】：2016-05-12 07:18:12

【问题描述】：

我已经为我的项目集成了 wow.js，但我遇到了动画问题。

只有当我将 animate.css 中的 css 类作为嵌入式样式表粘贴到我的页面中时，我用来为 div 设置动画的动画类才有效，即使我在 data-wow- 中给出延迟也会显示 div delay="5s" 并且动画在 5 秒后正常工作。如果有人知道为什么会这样，请帮助我。

这是我的代码..

html：

  <div class="cssAnimation hidediv">
    <div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s">
        Anmation goes here 1
    </div>
</div>

CSS：

  <style type="text/css">

.dial1
    width:200px;
    height: 100px;
    display: block;
    position: absolute;
    background: #000;
    color:#fff;
    padding: 10px;
    right: 0;
    z-index: 9999;


.dial2
    width:200px;
    height: 100px;
    display: block;
    position: absolute;
    background: #000;
    color:#fff;
    padding: 10px;
    right: 210px;



.hidediv
 -webkit-animation: hide 2s forwards;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-delay: 5s;
 animation: hide 2s forwards;
 animation-iteration-count: 1;
 animation-delay:  5s;


@-webkit-keyframes hide 
  0% 
     opacity: 1;
   
  100% 
     opacity: 0;
     visibility:hidden;
     display: none;
   


@keyframes hide 
  0% 
     opacity: 1;
  
  100% 
     opacity: 0;
      visibility:hidden;
     display: none;
 
 

   .cssAnimation
      width:600px;
      height: 300px;
     position: absolute;
   /* display: none; */
    z-index: 9999;
   

@-webkit-keyframes slideInLeft 
       0% 
          opacity: 0;
          -webkit-transform: translateX(-2000px);
           transform: translateX(-2000px);
          

      100% 
         -webkit-transform: translateX(0);
          transform: translateX(0);
       
      

    @keyframes slideInLeft 
        0% 
       opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
       transform: translateX(-2000px);
      

       100% 
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
      transform: translateX(0);
     
    

    .slideInLeft 
       -webkit-animation-name: slideInLeft;
        animation-name: slideInLeft;
    

  </style>

【问题讨论】：

动画类仅在您将类作为嵌入式 css 插入 <style></style> 标记后才能工作，这表明您没有正确链接到文件。至于动画仅在五秒后（有延迟）工作，这可能是由许多问题引起的。

感谢您的回复.. :) 当我在浏览器中使用检查元素找到文件并在新选项卡中打开它时，会显示 animate.css 文件。如果指向该位置的链接不正确，那么它将不会显示在新标签中，对吧..？所以我认为这不是位置或链接的问题。对于时间延迟：- 如果我们使用 data-wow-delay="5s" 给出时间延迟，那么 div 应该在延迟时间 5 秒后出现并执行动画，即正常情况对吧。？但是在页面加载本身时，div 正在显示。我使用 codeiginter 框架，我的 css 文件位于 header.php 中的页眉和脚本中

hidediv 在页面加载时不会隐藏，根据 CSS。您可以尝试将属性 opacity: 0; 添加到它。

我使用 hidediv 类在特定时间后使用 css 动画隐藏 div，它工作正常。它不是关于那个类的。我删除了该课程，问题仍然存在。我真正需要的是我的项目中的用户指南（如游览）。所以我需要显示一些带有css动画的对话框和图像，然后隐藏所有对话框。这就是为什么我使用 wow.js 制作动画和使用 hidediv 类隐藏 div。我进行了很多搜索，但找不到隐藏使用哪个动画的 div 的选项，这就是为什么我使用父 div 和类 hidediv 来隐藏 div。

【参考方案1】：

您的 css 需要包含 animate.css 中的 .animated 类，因为当元素在视图中时，Wow.js 将添加该类（除非您指定另一个选择器），从而触发您的动画。