我有一个问题,不让我睡觉.
假设我有这些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>
Run Code Online (Sandbox Code Playgroud)
用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>
Run Code Online (Sandbox Code Playgroud) 我正在尝试通过组合对addClass/removeClass的调用来制作动画序列.
在动画结束后,调用"removeClass"来删除动画并启动一个新动画.但由于某种原因,没有任何反应.我想弄清楚它为什么不起作用?为什么不删除课程?
$animate.addClass(element, 'fadeInDown').then(function() {
$animate.removeClass(element, 'fadeInDown'); // why is it not working?
$animate.addClass(element, 'fadeOutDown');
});
Run Code Online (Sandbox Code Playgroud)
完整版可以在这里找到
我有一个<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>
Run Code Online (Sandbox Code Playgroud) 我只是试图将animate.css与反应过渡组进行整合.我知道已经存在一个问题.但这不再有效.我需要一个有效的例子.这是我的尝试
<ReactCSSTransitionGroup transitionName={{enter: "animated", enterActive: "bounce", leave: "animated",leaveActive: "tada"}}>
{this.props.children}
</ReactCSSTransitionGroup>
Run Code Online (Sandbox Code Playgroud) 我创建了一个网站,使用按钮移动到下一页,一切正常.除了在所有内容下有很多空白的主页外.我试图隐藏溢出但阻止你必须单击的按钮转到下一页.我希望第一页的高度等于用户屏幕高度,如果某些内容不适合,则允许它们向下滚动.
这是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");
}
Run Code Online (Sandbox Code Playgroud)
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 …
Run Code Online (Sandbox Code Playgroud)我正在制作一个滑块slick carousel
,我想在幻灯片是 .css 时caption
使用animate
css动画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>
Run Code Online (Sandbox Code Playgroud)
这里是 SCSS
body {
padding: 0;
margin: 0;
}
#hero-slider {
.caption {
position: absolute;
left: 10%;
top: 10%;
h2,h3 {
color: white;
}
}
}
Run Code Online (Sandbox Code Playgroud)
以及jQuery
我正在使用的
$(document).ready(function(){
$('#hero-slider').slick({
autoplay: true,
autoplaySpeed: …
Run Code Online (Sandbox Code Playgroud) 我有一个页面,其中包含使用视频标记的视频.此外,我的页面使用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>
Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/p4nmt637/
此外,这个问题似乎只发生在chrome,我在FireFox和Safari中测试过,我没有这个问题.
我正在使用animate.css做一些动画.如果发生错误,该元素应该弹跳:
$target.addClass('animated bounce');
Run Code Online (Sandbox Code Playgroud)
这很好用.但是如果用户做同样的事情,就不会有第二个动画,因为已经添加了类.
所以我尝试在动画之后删除类,如下所示:
$target.addClass('animated bounce');
setTimeout(function(){
$target.removeClass('animated bounce');
}, 1000);
Run Code Online (Sandbox Code Playgroud)
我的问题是,如果这是应该怎么做(我不知道动画有多长),还是有另一种重复动画的解决方案?
animate.css ×10
css ×5
animation ×3
javascript ×3
jquery ×3
angularjs ×2
css3 ×2
html ×2
bootstrap-4 ×1
fullscreen ×1
reactjs ×1
slick.js ×1
transform ×1
transition ×1
video ×1