专栏首页前端儿卡片列表项缓缓往下展示 效果实现

卡片列表项缓缓往下展示 效果实现

不久前在某运动APP上看到一个卡片缓缓往下展示的效果,感觉这动画还可以

似乎项目中也有类似的卡片列表,列表的展示是直接显示出来的,加上动效之后应该更有活力,便照着样子实现了一下

点我预览

这种效果,核心点就是添加了个CSS动画,主要控制了四个属性

先看HTML结构部分

<body>
    <article>
        <!-- 卡片容器 -->
        <div class="items"></div>
        <a href="javascript:;" class="items-more-btn">展开</a>
    </article>

    <!-- 模板结构 -->
    <script type="text/template" id="item-tpl">
        <div class="item item__anim item__anim-{{index}}">
            <h2>标题{{index}}</h2>
            <p>{{content}}</p>
        </div>
    </script

绑定事件,点击展开则添加一组卡片,JS部分也不复杂

  <script>
        function addEvent(elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }

        function qs(selector) {
            return document.querySelector(selector);
        }

        function qsa(selectors) {
            return document.querySelectorAll(selectors);
        }

        var mockData = ['内容1', '内容2', '内容3', '内容4', '内容5'];

        addEvent(qs('.items-more-btn'), 'click', function() {
            renderList(mockData);
        });

        var itemTpl = qs('#item-tpl').innerHTML;
        var itemsDOM = qs('.items');

        /**
         * 渲染数据
         * @param  {[type]} data [description]
         * @return {[type]}      [description]
         */
        function renderList(data) {
            var data = data.map(function(val, index) {
                return {
                    index: index + 1,
                    content: val
                };
            });

            var html = '';
            var fragment = document.createDocumentFragment();

            data.forEach(function(item) {
                var divTemp = document.createElement('div');

                // 模板替换
                divTemp.innerHTML = itemTpl.replace(/{{(\w+)}}/g, function(input, match) {
                    return match ? item[match] || '' : '';
                });

                fragment.appendChild(divTemp.firstElementChild);
            });

            // 渲染
            itemsDOM.appendChild(fragment);
        }
    </script>

最后便是由CSS控制的部分了

每个卡片都有个类名 item__anim ,用以设置动画

动画展开时主要包含四种效果

由上到下的衔接效果:每个卡片自带一个类 item__anim-n ,用以设置延时,当然了,这里就需要引入scss来提高生产力了

往下掉的效果:使用 translate3d 控制y轴位移

渐显效果: 使用 opacity

放大效果:使用 scale

body {
            background: #f2f2f2;
        }

        article {
            margin-bottom: 100px;
            width: 500px;
            text-align: center;
        }

        .items {
            width: 400px;
            margin: 30px auto;
        }

        .items-more-btn {
            margin-bottom: 20px;
        }

        @keyframes showBox {
            to {
                opacity: 1;
                transform: scale(1) translate3d(0, 0, 0);
            }
        }

        .item {
            position: relative;
            margin-top: 10px;
            width: 100%;
            height: 150px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            color: #666;

            opacity: 0;
            transform: scale(.9) translate3d(0, -10px, 0);

            &:nth-child(odd) {
                height: 200px;
            }

            h2 {
                width: 100%;
                font-size: 18px;
            }

            &.item__anim {
                animation-name: showBox;
                animation-duration: .4s;
                animation-fill-mode: forwards;
            }

            &__anim-1 {
                animation-duration: .6s;
            }

            @mixin showingDelay() {
                @for $n from 1 through 30 {
                    &__anim-#{$n} {
                        animation-delay: #{(0.05 + $n / 10)}s;
                    }
                }
            }

            @include showingDelay();
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS常见兼容性问题总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

    书童小二
  • 无聊的人用JS实现了一个简单的打地鼠游戏

    如果点击颜色比较深的那个(俗称坏老鼠),将扣分50;如果点击颜色比较浅的那个(俗称好老鼠),将得分100

    书童小二
  • 图片轮播(左右切换)--JS原生和jQuery实现

    左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

    书童小二
  • vue 手写一个时间选择器

    最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件。

    小皮咖
  • 【Web】一个非常简单的移动web消息框

    最近在写个简单的公众号页面,前端验证时有些信息要提示,很简单的需求实在不想找啥现成的轮子,又不至于用alert这么粗暴,遂写了个非常简单的消息框,效果如图:

    AhDung
  • 几种常见的 CSS 布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    夜尽天明
  • 几种常见的CSS布局

    其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法

    Nealyang
  • 爬虫学习

    安装Anaconda(集成环境), 安装成功后能够提供一种基于浏览器的可视化工具 ---Jupyter.

    py3study
  • 前端css实现最基本的时间轴

    祈澈菇凉
  • nodejs使用sequelize操作mysql实例

    sequelize是node操作mysql的一款npm包,包含很多特性:数据库模型映射、事务处理、模型属性校验、关联映射等,花了两天时间学习了下基本的一些操作,...

    用户1141560

扫码关注云+社区

领取腾讯云代金券