标签: animate.css

我有一个CSS 3动画的div在一段时间后滑入.我想要的是几个div来填充滑动的动画div的空间,然后它会将这些元素推向页面.

当我在第一个div处尝试此操作时,即使不可见,滑动仍会占用空间.如果我将div更改为div display:none则根本不会滑入.

在定时进入之前,我如何让div不占用空间(使用CSS作为时间.)

我正在使用Animate.css进行动画制作.

这是代码的样子:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

如代码所示,我希望隐藏主div,其他div最初显示.然后我有以下延迟设置:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

正是在这一点上,我希望主要的div能够推动其他div进入.

我该怎么做呢？

注意:我已经考虑过使用jQuery来做这个,但我更喜欢使用严格的CSS,因为它更平滑,时间控制得更好.

编辑

我尝试过Duopixel建议但是我误解了并且没有正确地做到这一点或者它不起作用.这是代码:

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}

今天我尝试在我的网站animate.css中实现

但我想确保'效果在:hover中激活所以我使用了jquery

代码是:

 $(".questo").hover( function (e) {
    $(this).toggleClass('animated shake', e.type === 'mouseenter');
});

问题是,一旦你移除鼠标,'效果就会中断.一旦它开始,它甚至可以在没有悬停效应的情况下降低效果？

谢谢大家

我想在我的下拉列表中添加一个CSS3效果.(就像Instagram.com中关于"我的个人资料"的那个).

我正在使用Animate.css来获得CSS3效果.

我试过这个,但它不起作用.

HTML

<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a>

<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
   <li><%=link_to "Facebook", "#"%></li>
   <li><%=link_to "Email", "#" %></li>
</ul>

JS

$(document).ready(function(){
    $('a').hover(function(){
        $("ul").addClass('animated bounceInDown');
    });
});

您可以在Zapping.io上找到实时版本

我在着陆页中使用带有waypoints.js的animate.css.我想在用户滚动页面时为元素设置动画.但是,问题是我需要在动画开始之前隐藏元素(如果我不隐藏,animate.css首先隐藏元素然后动画,看起来非常难看).

但是,我通过在我的CSS中添加两个类来解决问题,但它会产生另一个问题.

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

在我添加animation-delay元素之前,这很有效.这是我想要实现的解释.我有这样的元素:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

我想为每个元素添加动画延迟,以便它们fadeInUp 在每个元素之后使用animation-delay属性指定秒数.我不能让这个工作.我尝试使用代码而不使用动画延迟但没有成功.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

如果我的方法完全错误,请告诉我？如果是,那么你可以提供更好的方法来完成.

我已经戳了一下,似乎没有直接的方法让Animate.css动画在Angular中运行.这意味着,动画基本上需要从Animate.css库中删除并转换为Angular动画.

是否有我遗漏的东西,或者我在这个主题上遗漏的任何资源？否则,是否有其他动画库可以与Angular 4一起开箱即用？

当我尝试编译我的grunt文件并构建到我的dist文件夹中进行部署时,我在控制台中收到以下错误:

Running "rev:dist" (rev) task
dist/public/app/app.js >> 63decaf3.app.js
dist/public/app/vendor.js >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/animate.css" file (Error code: EISDIR).

原因是我有一个名为animate.css的安装了bower组件.该库是安装在我当然bower_components文件夹,但匹配的字符串我在咕噜文件只查找文件具有的扩展.js,.css,等等.这是我的匹配字符串:

// Renames files for browser caching purposes
rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/{,*/}*.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',  // Offending line
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*'
      ]
    }
  }
}

这是目录结构:

bower_components
  -> ...
  -> angular-ui-router
  -> animate.css  // Folder with the …

我正在使用带有React的animate.css库,并试图在悬停时设置一个元素(按钮).试图通过文档和这里查看,但无法找到实现这个简单任务的方法.如果有人已经实现了这个或发现参考将非常感激

class App extends Component {

   constructor(props) {
    super(props);

    this.handleHover = this.handleHover.bind(this);
  }

  handleHover(){
    this.setState({
        isHovered: !this.state.isHovered
    });
  }

  render() {
    const btnClass = this.state.isHovered ? "pulse animated" : "";

    return (
      <div>
        <button className={btnClass} onMouseEnter={this.state.handleHover} onMouseLeave={this.state.handleHover}>Test</button>
      </div>
    );
  }
}

export default App;

我正在使用Animate.CSS,我正在使用"铰链"效果让图像从屏幕上掉下来.当它离开屏幕时,它会向页面添加一个垂直滚动条.滚动时,没有任何内容可见.为什么要添加此滚动条以及如何防止它被添加？

谢谢!

码:

HTML

<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />

CSS

.fear{
     position:absolute;
     left:150px;
     top:0px;
}

#animate {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}

JS

var $j = jQuery.noConflict();
   $j(document).ready(function() {
       $j('#animate').addClass('animated hinge');
           });

这是我创造的小提琴.

我正在学习和试验Angularjs和animate.css.当ng-show为true或false时,我试图添加动画.显示和隐藏的作品,但不是动画.希望有人在这里可以告诉我我做错了什么.

这是插件.

谢谢您的帮助.

我有这个简单的Todo List,

我需要在添加和删除时添加animate.css库动画.我真的很新.我已阅读文档,但很难理解,

这是一个需要编码帮助的问题.

http://jsfiddle.net/johnthethird/NXCyC/7/

/** @jsx React.DOM */
var TodoList = React.createClass({
  propTypes: {items: React.PropTypes.array},
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input …