我的页面上有一些元素,我一次只能加载5个元素.
我需要做的是使用animate.css为加载的元素设置动画.
为了解释这一点,我创造了这个小提琴：
https://jsfiddle.net/89v781rL/6/
向下滚动以查看“显示更多”按钮并单击它以查看其运行情况.
当我加载更多项目时,元素是动画的,但因为它们是以砌体风格布局,它们的位置不断变化,这不是我想要的.基本上我需要将元素保持在第一个位置并继续添加/加载更多元素.
如果您注释掉以下CSS代码并运行JSFIDDLE,您将看到元素的布局有多好,这也是我希望它们在一次加载5时的样子：
#grid li:nth-child(n+6) {
/*display: none;*/
}
我需要做的是使用animate.css将元素反弹.
这是我的完整代码：
$('#sales').click(function() {
$('#grid li').not(':visible').slice(0,5).slideDown();
$('#grid li').not(':visible').slice(0,5).addClass('animated bounceInUp');
});
主要是因为它对我的项目而言非常庞大和臃肿,并且它在我的项目中也无法正常运行.
有人可以就这个问题提出建议吗？
编辑：
这是另一个失败的尝试：
https://jsfiddle.net/89v781rL/8/
还有这个：
Proposed solution.
简单地说,你想要的是不可能的.至少不是你如何开始它.
但是,这就是问题：我进入编码的原因(来自设计背景 – 以及我回答你的问题的主要原因)是因为一群网络开发人员告诉我我所做的特定设计,这是不可能的.所以我(重新)进行了搜索和实验,直到我找到了方法.
从那以后,每当我得出这个结论时,我总是把它翻译成：
这是可能的,我只是做错了.
在您的特定情况下,您使用的是“砖石”技术,这种技术并不完全是砖石结构.这是一种名为CSS columns的列布局技术.从技术角度来看,这就是它的作用：
>计算列的宽度,考虑父总宽度,列数和列装订线
>根据得到的列宽计算内容的总高度
>将内容分成适合列的块,尝试平等分配内容,尊重任何break-inside声明.请注意属性值的暗示名称：避免,不禁止或禁止.根据内容,此规则并不总是适用.
但是,简而言之,这里是您的2列布局最初呈现的方式：
1 4
2 5
3 6
当您决定添加更多内容时,它将再次执行上述步骤,考虑到更新的内容高度导致：
1 5
2 6
3 7
4
它将计算可能的破坏选项,并将用于导致父元素的最小高度的选项.如果两个或多个结果具有相同的高度,则大多数浏览器将选择使较晚/最后一列更短的浏览器.
如果您的内容在渲染后需要保留到位,那么CSS Columns技术显然不是一种选择.所以你正在研究使用绝对定位的技术.你有很多选择,但值得注意的是(我可能是主观的 – 但是有人真正客观吗？)是：
> Masonry.它配备了非常方便的stamp方法,专门针对您的要求而设计(将现有元素粘贴到位,因此添加更多内容不会重新定位现有元素 – 这可能偶尔会发生,具体取决于内容和父级 – 例如,如果你有一个现有的短项目列表,并且你添加了一个非常高的项目,它将导致一列比其他项目更高;如果没有在现有项目上调用标记,它们将被重新定位,以便生成的列具有高度差异最小)
> Isotope – 我从来没有机会使用它,但我听到了很好的事情.
>所谓的pinterest布局脚本.它是由Evan Sharp编写的,它完全依赖于javascript和绝对定位(就像Masonry一样)但效率非常高.他解释了他是如何做到的in this SO answer,这是关于这项技术的good tutorial.如果你不太关心技术部分并且只对果汁感兴趣,我发现了一个名为Bootstrap Waterfall的轻量级插件,除了上面列出的所有内容外,还有一个生产就绪的可用版本.
到目前为止我写的所有东西都是一点点时间和体面的搜索 – 你会得到的.
剩下的唯一步骤(以及真正的答案)是使用所需的animate.css效果将每个项目动画化为视图.我为布局选择了Bootstrap-waterfall,但您也可以选择任何其他选项.这里是：
// Included waterfall script as it doesn't load from github for everyone
+function(t){"use strict";function i(i){this.$pins=i,this.tasks=[],this.timerId=null,this.deferred=new t.Deferred}function e(t){this.img=t,this.initialWidth=t.width,this.initialHeight=t.height}function n(i){return this.each(function(){var e=t(this),n=e.data("mystist.waterfall"),s="object"==typeof i&&i;n&&"string"!=typeof i&&n.destroy()&&(n=null),n||e.data("mystist.waterfall",n=new o(this,s)),"string"==typeof i&&n[i]()})}var s=s||{now:Date.now||function(){return(new Date).getTime()},throttle:function(t,i,e){var n,o,r,a=null,h=0;e||(e={});var l=function(){h=e.leading===!1?0:s.now(),r=t.apply(n,o),a||(n=o=null)};return function(){var u=s.now();h||e.leading!==!1||(h=u);var c=i-(u-h);return n=this,o=arguments,0>=c||c>i?(a&&(clearTimeout(a),a=null),h=u,a||(n=o=null)):a||e.trailing===!1||(a=setTimeout(l,c)),r}},debounce:function(t,a,h,l=function(){var u=s.now()-a;i>u&&u>=0?n=setTimeout(l,i-u):(n=null,e||(h=t.apply(r,n||(r=o=null)))};return function(){r=this,a=s.now();var u=e&&!n;return n||(n=setTimeout(l,i)),u&&(h=t.apply(r,r=o=null),h}}},o=function(i,e){this.$element=t(i),this.options=t.extend({},o.DEFAULTS,e),this.id=Math.random().toString().slice(2),this.$fakePin=null,this.$container=null,this.$pins=null,this.pinWidth=null,this.imgWidth=null,this.lefts=[],this.tops=[],this.init().calculateWidth().calculatePosition().sail(),t(window).on("resize.mystist.waterfall"+this.id,s.debounce(t.proxy(function(){t(window).off("scroll.mystist.waterfall"+this.id),this.calculateWidth().calculatePosition().ship(r.getLoadedPins.call(this))},this),777))};o.VERSION="0.2.4",o.DEFAULTS={},o.prototype.init=function(){return this.initPins().initAttributes(),this},o.prototype.initPins=function(){var i=this.$element.children().length>0?this.$element.children().remove():t(this.$element.data("bootstrap-waterfall-template"));return i.each(function(){var i=t(this).find("img:eq(0)");i.length>0&&(t(this).data("bootstrap-waterfall-src",i.attr("src")),i.attr("src","data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="))}),this.$pins=i,o.prototype.initAttributes=function(){return this.$fakePin=this.$pins.first().clone(),this.$container=t("
#waterfall .pin {
width: calc(50% - 4px);
opacity: 0;
animation-duration: 0.75s;
animation-fill-mode: both; }
#waterfall .pin.inView {
opacity: 1;
animation-name: bounceInUp; }
#waterfall .pin.inView.fix {
animation: none; }
#waterfall .pin a {
display: block;
padding: 4px 4px 8px; }
* {
Box-sizing: border-Box; }
.container {
text-align: center; }
.container #waterfall {
max-width: 800px;
margin: 0 auto; }
@keyframes bounceInUp {
from,60%,75%,90%,to {
animation-timing-function: cubic-bezier(0.215,0.61,0.355,1); }
from {
opacity: 0;
transform: translate3d(0,3000px,0); }
60% {
opacity: 1;
transform: translate3d(0,-20px,0); }
75% {
transform: translate3d(0,10px,0); }
90% {
transform: translate3d(0,-5px,0); }
to {
transform: translate3d(0,0); }
}
