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

最新推荐文章于 2024-07-07 11:37:59 发布
最新推荐文章于 2024-07-07 11:37:59 发布
阅读量299 收藏
点赞数
文章标签： javascript ViewUI

不久前在某运动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();
        }

 

weixin_34221775
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
APP Store卡片展开效果实例
qq_44087363的博客
09-19 538
APP Store卡片展开效果实例 项目地址 项目代码地址 敲码思路 B站UP主 CodingStartup起码课 该项目是针对手机App Store软件页面卡片展开效果的实现，整个页面的宽度也只有480px。 页面制作的主要效果通过jQuery，使用toggleCLass方法实现类的转换，其中页面样式较多的使用到css3中的一些属性。 知识锚点 root 是css伪类匹配文档的根元素，对于html来说，:root元素表示html根元素。除了优先级更高以外，与html选择器相同。在声明变量
Vue实战篇二十三：卡片风格与列表风格的切换
我的博客
03-25 8138
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
cardSlideAround-卡片滑动切换特效.zip
09-23
可以改造为探探等卡片切换效果效果图如下效果简述上下左右均可移动随点击移动在上下左右一定的范围内移动后会返回原来的位置，不会切换只有大于一定范围才会产生切换，同时切换效果随移动方向不同，产生不同的切换效果代码解析wxmlwxml里有两个卡片，相互重叠卡片绑定touch的开始，移动和结束方法，获取点击的位置绑定动画，方便之后的动画操作js在touch的开始方法里，绑定点击的初始位置设置卡片绝对定位，在touch移动的方法里，绑定top和left值，实现随点击点移动而移动在点击的结束方法里获取最后的点击位置，和初始位置做对比，如果x，y移动的大小在一定的范围内，则恢复绝对定位的初始值如果大于x，y设定的范围则实现切换效果特效微信的js动画特效是根据css3封装而来，我当时尝试用css3实现，但结合一些动画出发要求等原因，使用微信的js东特特效还是相对方便绑定了z-index，基本实现两张卡片的相互切换模仿微信小程序文档写了动画的效果，注意的就是translate移动之后，一定要再移动回0，这样才能在之后回到卡片初始位置卡片绑定了透明度的变量，根据移动所占百分比，来显示底层的透明度movebox原本分1,2。目前已经合并为一个函数，其他1,2的控制动效控制函数可以适当合并后续这个源码，可以在卡片内插入任意内容，相互切换我自己使用的情况是去除了移动，直接切换，1、2卡片绑定的是同一个变量，由于不能移动，所以看不到下面的内容，一旦成功切换卡片，同时绑定的变量也会切换，达到了内容随卡片切换的效果如果不去除移动的话，就不能1、2卡片绑定同一个变量，因为移动上面卡片会看到下面的卡片解决方法1（个人思考，如果有更好的欢迎交流）绑定两个变量，切换卡片的同时，更新该卡片绑定的数据解决方法2（个人思考，如果有更好的欢迎交流）1、2卡片绑定一个数组变量，同时1、2绑定的固定的数组0位和1位数据一旦切换，则分别使用pop或shift，push或unshift进行数组变量的数据更新这样保证了数组数据切换时，卡片数据的相对固定
原生js简单实现App Store 卡片展开效果
ZuoZuoDangerou的博客
01-15 565
先看效果 由于代码很简单就不进行说明了 代码在下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> h
纯前端实现 App Store 卡片展开效果
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-15 1100
↓推荐关注↓今集我们会模仿 App Store 这个卡片展开效果：本来想只用 HTML 和 CSS 去制作，但最后都要运用到 JavaScript，那我们立即开始吧。HTML 的部分打开 ...
做产品，到底选卡片设计还是列表设计？这篇文章告诉你
Lemonliyi的博客
01-29 371
卡片设计常用于移动端产品，具有很好的视觉效果，可以说是页面布局的神器。 墨刀素材广场作品——摄图app 不管是什么类型的产品和场景，它都完全合适。 墨刀素材广场作品——旅游娱乐原型 今天，我们想跟刀友们分享Alex Zlatkus写的一篇文章，主要内容是讲述了卡片设计的演变、卡片设计的种类以及他们是如何影响作者的，一起来看看吧～ 前情提要 我最近被任命重新设计以下筛选结果页面： 1.筛选用户（创意）结果： 2.项目的筛选结果： 这些结果的呈现形式看起来像是卡片（而非列表项）。 我不知道这是否就是最佳
Android中ListView左右联动
07-12
比如，当左侧ListView的某一项被选中时，右侧的组件可以缓缓地展示出来，增加视觉吸引力。 为了更好地理解这一过程，我们来看一个简单的示例。在`TestLayout`文件中，可能包含了一个ListView的布局，以及用于展示...
【界面设计】界面设计方法 (8)：卡式、列表、主细表、树形、页签
JosieBook
06-28 552
企业管理类型系统采用的PC端界面形式常见的有5种 （卡式、列表、主细表、树形、页签），以及以这5种形式为基础的组合形式。确定一个业务功能采用什么样的界面形式表达的效果最佳，一般是综合了客户的业务需求、数据结构、数据数量、编辑权限等综合判断得出的。界面是设计师展示自己能力最为重要的窗口，如何选择、规划、布局界面，直接关系到客户满意度的高低、产品客户价值的大小，细致的设计、布置这个窗口需要有客户业务知识、应用设计知识、UI知识以及最好还能具有一定的软件开发知识和背景。
14种炫酷堆叠卡片切换动画特效
01-25
插件描述：14种炫酷堆叠卡片切换动画特效。 参考实例：http://www.jq22.com/jquery-info5672
列表卡片效果
weixin_30585437的博客
09-17 385
1.加入依赖 implementation 'com.google.android.material:material:1.0.0' 2.然后直接在.xml布局文件中使用，先贴上布局文件代码，结尾附上效果图 1 <?xml version="1.0" encoding="utf-8"?> 2 <androidx.cardview.widg...
QT5 卡片布局（QLayout）
11-26
QT5实现的卡片布局，基于QLayout的CardStackLayout，实现动画效果。
实现卡片式列表(ListView)布局
04-03
感谢网友nijiayou2012上传，源码可以支持实现卡片式列表(ListView)布局，实现卡片式列表布局。点击列表上某一行，该行跳到最前面显示具体内容。具体效果请看Gif效果图。可以在卡片中添加文字、链接、图片等等内容，这种效果多见于新闻应用中都已经出现了，片段。
cardview:卡片视图的Qt实现
06-12
卡片视图库 卡片视图的 Qt 实现。 包括自定义模型的包装代理和用于在卡片中显示模型数据的 QAbstractItemView 的实现。
QT 实现 以名片列表的形式 显示 10万 条数据 - 如何流畅的显示十万条数据
LearnLHC的博客
09-01 1385
1、常用实现方式 - 有多少就创建多少，就显示多少 MainWindow.h文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QWidget> #include <QTableWidget> #include <QVBoxLayout> #include <QTableWidgetItem> #include <QList> #include <QString> st
卡片风格与列表风格的切换
askuld的博客
06-19 1523
【代码】卡片风格与列表风格的切换。
QT之列表框
foreverjueye的博客
04-26 3708
文本框中显示点击过的内容
和干瘪的列表说拜拜，看看卡片列表的精彩演绎
最新发布
2401_82943878的博客
07-07 323
在移动UI设计中，卡片列表是一种常见的设计模式，可以将干瘪的列表变得更加生动和精彩。卡片列表通过使用卡片元素来呈现列表项，每个卡片可以包含图片、标题、描述、按钮等内容，使得列表项更加丰富和有趣。通过以上的精彩演绎方式，可以让移动UI设计中的卡片列表更加生动、有趣和吸引人，提升用户的体验和参与度。
卡片式列表：在B端系统列表中非必要不要用。
2401_82943878的博客
06-13 333
B端系统的列表页通常是指面向企业用户的后台管理系统中的数据列表展示页面。这类页面通常用于展示大量数据，并提供搜索、筛选、排序、分页等功能，以便用户能够快速找到所需的信息。列表页主要用于展示大量数据，通常以表格的形式呈现，每一行对应一条数据记录，每一列对应数据的不同属性。用户通常可以通过搜索框输入关键词，或者通过筛选条件来过滤数据，以便快速定位目标数据。用户可以根据需要对数据进行排序，通常可以点击表头来对相应列进行升序或降序排列。
Qt 卡片控件 一个以卡片样式展示信息的自定义控件
dododododoooo的博客
06-14 1095
Qt 自定义卡片控件
v-for应用到卡片，实现卡片列表循环
06-03
好的，您可以使用以下代码来实现一个基本的卡片列表循环： ``` <h3 class="card-title">{{ card.title }} <p class="card-description">{{ card.description }} new Vue({ el: '#card-list', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值