起动

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们就去给这个页面上的内容列表添加 mixitup 的功能 .. 首先我们要把页面上的列表项目隐藏起来 .. 这里我直接在页面上添加一个 style 标签 .. 然后把页面上的内容项目隐藏起来 ..

这里就是把这个带 .column 类的元素隐藏起来 .. 找到 .container .ui.grid .column .. 把它的 display 属性设置成 none ..

然后打开我们在页面上嵌入的自定义脚本 .. 先添加一个立即执行函数 .. iife ..

在它的里面,我们先用 jQuery,找到内容列表的包装元素 .. 我这里就是 .grid 这个类所在的元素 .. 注意这个容器的元素应该是内容项目元素直接的父元素 ..

然后使用一下 mixItUp .. 注意大小写 ..

给它一个对象参数 .. 然后把相关的配置放到里面 .. 比如我们要找到页面上想要使用 mixitup 的列表项目 .. 先用一个 selectors 属性 .. 它的值是一个对象 .. 在这个对象里面,添加一个 target .. 设置一下目标 .. 我这里就是 .column 这个类所在的那个元素 ..

保存 .. 你会看到, 在页面加载的时候,mixitup 会用一个动画效果显示页面上的内容项目 .. 因为我们一开始把页面上的内容项目隐藏起来了 ..

mixitup 会找到页面上的内容项目,在上面应用动画效果 .. 你会发现,完成以后,在这些元素的上面,都会重新设置一下它的 display 属性 .. 默认它的值是 inline-block ..

我们可以修改这个属性的值 .. 回到这个配置对象 .. 先添加一个 layout 属性 .. 它的值是一个对象 . 然后在它的里面用一个 display 属性 .. 把它的值设置成 block .. 保存一下 ..

现在,你会发现,这些内容项目的上面,display 属性的值就会使用 block ..

下面我们再把它的值设置成默认的 inline-block ...

0:00
2:20
2:22

起动《 MixItUp:动画过滤与排序 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点