如何使用css动画逐个显示元素
How to make elements appear one by one using css animation
如何使用css动画(jQuery)让元素一个接一个地出现,我试图让它看起来像波浪,但我只能一次显示所有元素,所以如果你能帮助我,我将不胜感激
$(window).scroll(function() {
$(".wave").each(function() {
var position = $(this).offset().top;
var winTop = $(window).scrollTop();
if (position < winTop + 650) {
$(this).addClass("slide-wave");
}
});
});
.wave {
visibility: hidden;
}
.slide-wave {
animation: slide-one .4s;
visibility: visible;
}
@keyframes slide-one {
0% {
opacity: 0;
transform: translateY(80%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
我刚刚写了一些类似的代码来在字符串中闪烁或弹出单个字符。我不提供任何特定于您的代码的内容,而是提供我用于将动画应用于一组元素的原理或方法。
这是沿着类似的路线进行的——这可能是有用的,首先我给字符串的每个元素一个单独的、顺序的ID——有点像数组:
<p id="char-0">S</p>
<p id="char-1">t</p>
<p id="char-2">r</p>
<p id="char-3">i</p>
<p id="char-4">n</p>
<p id="char-5">g</p>
我实际上写了一个函数,它将字符串作为参数,并生成这些<p>带有顺序ID的标签。我所做的下一件事是编写一个递归函数,它遍历所有元素,类似于以下内容:
function popElements(
strElID, // Element ID prefix string
intStart, // Start element
intEnd, // End element
objTo, // Animate from current state to this...
objFrom, // ...animate from objTo to this.
intDuration, // duration for the animations.
strEasing, // For animate
intTimeout // Interval between recursive calls
) {
var e = intStart; // intFrom needs to be increased/decreased for next
// call, record it here.
var f;
$(document).ready(function() {
// Use the .length property to check for the existence of
// this element, if we call:
//
// popElements(
// "char-",
// 0,
// 10,
// { "opacity": "0.00" },
// { "opacity": "0.99" },
// 500,
// "linear",
// 100
// )
// We will apply the animations to all char-*n* and return when
// char-*n* isn't found
if ($("#" + strElID + e.toString()).length == 0)
return;
// We need to remember the value of e because it points to the
// current element being animated, but we need to increase/decrease
// it also for the next call to popElements().
f = e;
if (f < intEnd)
// Forwards
f++;
else if (f > intEnd)
// Backwards
f--;
// Do the first animation.
$("#" + strElID + e.toString()).animate(
objTo,
intDuration,
strEasing,
// Last animation
function() {
$("#" + strElID + e.toString()).animate(
objFrom,
intDuration,
strEasing
);
}
);
// The last element has been animated..
if (e == intEnd)
return;
// Next element, we're passine the value of f here which should
// point to the next element to be animated
setTimeout(function() {
popElements(
strElID,
f,
intEnd,
objTo,
objFrom,
intDuration,
strEasing,
intTimeout
);
}, intTimeout);
});
}
重要的是以这样一种方式对id进行编号,以便它们在循环中易于引用。如果你认为我有帮助的话,我可以发布我的实际代码,但它对我的项目很具体,可能没有帮助,但这只是你如何使它发挥作用的一个想法。
效果很好,效果也很好。
如果你把上面的<p>lt/p>文件中的标签并调用:
popElements(
"char-",
0,
10,
{ "opacity": '0.01' },
{ "opacity": '0.99' },
500,
"linear",
100
);
它将分别将动画应用于每个角色。
从本质上讲,不用说你不需要使用animate(),你可以随心所欲。也许甚至可以调整函数,使其接受回调参数,世界是你的牡蛎,但我希望它对中小企业有帮助。
相关文章:
- javascript来显示元素属性
- 使用JavaScript或jQuery隐藏和显示元素
- 如何在Angular JS中滚动显示元素
- 如何在使用jQuery应用display:none后正确显示元素
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- jQuery单击并显示元素列表
- 键盘没有在Android和BlackBerry中显示元素焦点
- 在CSS转换期间显示元素的大小值
- 当我们关注jQuery时,只显示元素
- 包含方法和突出显示元素的问题
- JS/JQuery隐藏元素,更改文本,显示元素
- 如何显示元素的一部分,并在单击时切换到所有元素
- 在隐藏元素中显示元素
- 当PROTRACTOR元素后面有元素时,我怎么能知道当前的显示元素
- 在mouseover上显示元素在mouseleave上隐藏
- jquery显示元素是否具有类和特定值的内容
- 不能在复选框旁边显示元素
- 动态显示元素上的JavaScript触摸端;不要开火
- 点击JQuery/HTML5显示元素的索引/位置
- AngularJS:如何默认显示元素,并在按下按钮时切换