标签: animate.css

我有以下小提琴

它div包含3个背景图像。如您所见，所有图像都在旋转，但是我只希望风扇图像在旋转。所有其他人应保持不变。如何在不添加额外div的情况下执行此操作？

亲切的问候

我有一个问题,不让我睡觉.

假设我有这些div:

<div class="container">

    <div class="sixteen columns">
        <div class="dark animated fadeOutRight"><img src="images/dark.gif"></div>
        <h2 class="motto">aspettaci...</h2>
    </div>

</div>

用animate.css动画(但我认为任何动画都很好).

我想创建一个在页面中传输的div序列.例如.

div1 - >淡出然后
n秒后div2 - >滑入然后
div2 - >滑出然后div3来并停止...

我尝试延迟,但它一团糟,div2总是在页面上可见.我真的不知道该怎么做.也许我必须将所有div移出页面,或者我可以用jQuery以简单的方式执行此操作？

我正在使用animate.css和wow.js.

第三个,数据延迟超过一秒,不会fadeInLeft.它通常会消失(而不是从左侧).

以前有人遇到过这个问题吗？我该如何解决？

-

这是我的观点.我在页面上有三个列表项.

<li>
  <span class="fadeInLeft wow" data-wow-delay="300ms">Text1</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="800ms">Text2</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="1200ms">Text2</span>
</li>

我正在尝试通过组合对addClass/removeClass的调用来制作动画序列.

在动画结束后,调用"removeClass"来删除动画并启动一个新动画.但由于某种原因,没有任何反应.我想弄清楚它为什么不起作用？为什么不删除课程？

$animate.addClass(element, 'fadeInDown').then(function() {
    $animate.removeClass(element, 'fadeInDown'); // why is it not working?
    $animate.addClass(element, 'fadeOutDown');
});

完整版可以在这里找到

http://plnkr.co/edit/EFybfU4jcZoT3S7jCpM8?p=preview

我有一个<button>和一个<span>内部选项卡.我想在将鼠标悬停在按钮上时添加animate.css类.我正在使用角度来包含它们.

它在chrome中不起作用(它在ie中起作用):

<div>
    <button ng-mouseover="one()" ng-mouseleave="two()">Hover over me</button>
    <span ng-class="{animated : zero, bounce : zero}">Animate me</span>
</div>

<script>
    function controlTotal($scope) {

        $scope.zero = false;

        $scope.one = function () {
            $scope.zero = true;
        };

        $scope.three = function () {
            $scope.zero = false;
        };

    };
</script>

我只是试图将animate.css与反应过渡组进行整合.我知道已经存在一个问题.但这不再有效.我需要一个有效的例子.这是我的尝试

<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
    {this.props.children}
</ReactCSSTransitionGroup>

我创建了一个网站,使用按钮移动到下一页,一切正常.除了在所有内容下有很多空白的主页外.我试图隐藏溢出但阻止你必须单击的按钮转到下一页.我希望第一页的高度等于用户屏幕高度,如果某些内容不适合,则允许它们向下滚动.

这是codepen:https://codepen.io/Lukie/pen/eWobYa

// If user clicks on .downBtn
function scrollDown() {
  $(".home").removeClass("slideInLeft");
  $(".home").addClass("slideOutUp");
  
  $(".content").css("visibility", "visible");
  $(".content").removeClass("slideOutDown");
  $(".content").addClass("slideInUp");
}

// If user clicks on .upBtn
function scrollUp() {
  $(".home").removeClass("slideOutUp");
  $(".home").addClass("slideInDown");
  $(".home").css("visibility", "visible");
  
  $(".content").removeClass("slideInUp");
  $(".content").addClass("slideOutDown");
}

body {
  background-color: white;
  overflow-x: hidden;
  transition: all .6s ease-in-out;
}

.home {
  top: 0;
  visibility: visible;
}

.content {
  position: absolute;
  top: 0;
  visibility: hidden;
}

.logo {
  margin: 4% 0 14% 0;
}

.downBtn {
  position: relative;
  color: orange;
  transition: all .3s …

我正在制作一个滑块slick carousel，我想在幻灯片是 .css 时caption使用animatecss动画active。

加载时动画在第一张幻灯片上工作正常，但在那之后，动画在其他幻灯片上不起作用。

这是我的 HTML

<div id="hero-slider">
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/1" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.123</h2>
    </div>
  </div>
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/2" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.456</h2>
    </div>
  </div>
</div>

这里是 SCSS

body {
  padding: 0;
  margin: 0;
}
#hero-slider {
    .caption {
        position: absolute;
        left: 10%;
        top: 10%;

        h2,h3 {
            color: white;
        }
    }
}

以及jQuery我正在使用的

$(document).ready(function(){
$('#hero-slider').slick({
  autoplay: true,
  autoplaySpeed: …

我有一个页面,其中包含使用视频标记的视频.此外,我的页面使用animate.css为我的元素添加一些动画.问题是当我在animate.css中使用样式时,我的视频无法正确显示全屏.这是我的页面示例:

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <h2 id="sv_title">Here is some text for illustration</h2>

        <div class="animated fadeInRight">
            <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls=""></video>
        </div>
    </div>
</div>

https://jsfiddle.net/p4nmt637/

此外,这个问题似乎只发生在chrome,我在FireFox和Safari中测试过,我没有这个问题.

我正在使用animate.css做一些动画.如果发生错误,该元素应该弹跳:

$target.addClass('animated bounce');

这很好用.但是如果用户做同样的事情,就不会有第二个动画,因为已经添加了类.

所以我尝试在动画之后删除类,如下所示:

$target.addClass('animated bounce');
setTimeout(function(){
    $target.removeClass('animated bounce');
}, 1000);

我的问题是,如果这是应该怎么做(我不知道动画有多长),还是有另一种重复动画的解决方案？