Flip动画的实现示例demo

news2024/12/25 3:24:21

Flip动画的实现示例demo

    • 文章说明
    • 核心代码
    • 效果展示
    • Flip动画工具类的封装

文章说明

文章主要为了学习flip动画的实现思路,并且采用此示例效果来理解该实现思路的含义

参考渡一前端袁老师的讲解视频

核心代码

采用简单的y轴变化的动画效果为示例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            margin: auto;
            margin-top: 100px;
            width: 100px;

            div {
                height: 30px;
                line-height: 30px;
                margin: 10px 0;
                background-color: chocolate;
                border-radius: 10px;
                color: #ffffff;
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

    <button onclick="randomFlip()">点击flip</button>

    <script>
        function getElemConfig(container, children, first, last) {
            const elemFirst = container.children[first];
            const elemLast = container.children[last];
            const destElem = children[last];
            destElem.style.transform = `translateY(${elemLast.getBoundingClientRect().y - elemFirst.getBoundingClientRect().y}px)`;
            return destElem;
        }

        function play(destElem) {
            setTimeout(() => {
                for (let i = 0; i < destElem.length; i++) {
                    destElem[i].style.transition = "transform 1s";
                    destElem[i].style.removeProperty("transform");
                }
            }, 100);
        }

        function randomFlip() {
            const numbers = [];
            const container = document.getElementsByClassName("container")[0];
            const children = [];
            for (let i = 0; i < container.children.length; i++) {
                numbers.push(i);
                children.push(container.children[i].cloneNode(true));
            }
            const result = derange(numbers);
            const destElem = [];
            for (let i = 0; i < result.length; i++) {
                destElem.push(getElemConfig(container, children, i, result[i]));
            }

            container.innerHTML = "";
            for (let i = 0; i < destElem.length; i++) {
                container.appendChild(destElem[i]);
            }

            play(destElem);
        }

        function derange(array) {
            let derangedArray = array.slice();
            let i = derangedArray.length;
            while (i > 0) {
                let j = Math.floor(Math.random() * i);
                while (j === i || derangedArray[i] === derangedArray[j]) {
                    j = Math.floor(Math.random() * i);
                }
                [derangedArray[i - 1], derangedArray[j]] = [derangedArray[j], derangedArray[i - 1]];
                i--;
            }

            return derangedArray;
        }
    </script>
</body>

</html>

效果展示

在这里插入图片描述

采用translateY进行 transform 动画
在这里插入图片描述

Gif展示
在这里插入图片描述

Flip动画工具类的封装

在实现拖拽排序示例时,我在参考的学习视频中看到有关于Flip动画功能进行了封装,我于是自己研究了一下,封装了该工具,工具类如下

class Flip {
    children = null;
    delay = 0;

    constructor(children, delay = 1) {
        this.children = children;
        this.calculatePos();
        this.delay = delay;
    }

    calculatePos(name = "first") {
        const children = this.children;
        for (let i = 0; i < children.length; i++) {
            children[i][name] = children[i].getBoundingClientRect();
        }
    }

    play() {
        this.calculatePos("last");
        const children = this.children;
        for (let i = 0; i < children.length; i++) {
            const first = children[i]["first"];
            const last = children[i]["last"];
            if (first.x !== last.x || first.y !== last.y) {
                children[i].style.transform = `translateY(${first.y - last.y}px) translateX(${first.x - last.x}px)`;
                setTimeout(() => {
                    children[i].style.transition = `transform ${this.delay}s`;
                    children[i].style.removeProperty("transform");
                    setTimeout(() => {
                        children[i].style.removeProperty("transition");
                        this.calculatePos();
                    }, this.delay * 1000);
                }, 0);
            }
        }
    }
}

关于拖拽排序和该工具类的使用,可参考这篇文章–拖拽排序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2141347.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【K230 实战项目】气象时钟

【CanMV K230 AI视觉】 气象时钟 功能描述&#xff1a;说明HMDI资源3.5寸屏幕 使用方法 为了方便小伙伴们理解&#xff0c;请查看视频 B站连接 功能描述&#xff1a; 天气信息获取&#xff1a;通过连接到互联网&#xff0c;实时获取天气数据&#xff0c;包括温度、湿度、天气状…

【STM32】独立看门狗(IWDG)原理详解及编程实践(上)

本篇文章是对STM32单片机“独立看门狗&#xff08;IWDG&#xff09;”的原理进行讲解。希望我的分享对你有所帮助&#xff01; 目录 一、什么是独立看门狗 &#xff08;一&#xff09;简介 &#xff08;二&#xff09;、独立看门狗的原理 &#xff08;三&#xff09;、具体操…

vulkano (rust) 画一个三角形 (vulkan 渲染窗口初始化 (Linux) 下篇)

上文说到, vulkan 相比 OpenGL (ES), 更加贴近底层硬件, 许多东西需要应用软件手动管理, 所以 vulkan 的初始化过程比较麻烦, 或者说学习曲线比较陡峭. 但是, 这种麻烦是一次性的, 一旦学会了, 就能开始享受 vulkan 的诸多好处啦 ~ 本文以绘制一个三角形为例, 介绍 vulkan 的初…

2024最新版,人大赵鑫老师《大语言模型》新书pdf分享

本书主要面向希望系统学习大语言模型技术的读者&#xff0c;将重点突出核心概念与 算法&#xff0c;并且配以示例与代码&#xff08;伪代码&#xff09;帮助读者理解特定算法的实现逻辑。由于大语言模型技术的快速更迭&#xff0c;本书无法覆盖所有相关内容&#xff0c;旨在梳理…

瓶中水位检测系统源码分享

瓶中水位检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

【数据结构】图的概念和存储结构

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《C游记》《进击的C》《Linux迷航》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、图的概念二、图的存储结构2.1 邻接矩阵2.1.1 成员变量与默认成员函数2.1.2 GetIndex2.1.3 AddEdge2.1.4 Pr…

使用 Java 初步搭建简单Spring 项目框架:

一、准备工作 安装 Java Development Kit (JDK)&#xff0c;确保环境变量配置正确。 安装一个集成开发环境&#xff08;IDE&#xff09;&#xff0c;如 IntelliJ IDEA 或 Eclipse。 二、创建项目——具体步骤 在 ider 中创建一个新的 Maven 项目 使用 Maven&#xff1a; 在…

Linux bash脚本本地开发环境(Git Bash)配置

参考资料 VSCode: Windows 下配置 VSCode运行shellVSCodeを使用したシェルスクリプトの開発環境作成 目录 一. 必备VSCode插件二. 插件配置说明2.1 Bash IDE2.2 Code Runner2.3 shell-format 一. 必备VSCode插件 Bash IDE 该插件为 Bash 脚本提供了一些实用的开发工具和功能&…

鸿蒙 ArkUI组件二

ArkUI组件&#xff08;续&#xff09; 文本组件 在HarmonyOS中&#xff0c;Text/Span组件是文本控件中的一个关键部分。Text控件可以用来显示文本内容&#xff0c;而Span只能作为Text组件的子组件显示文本内容。 Text/Span组件的用法非常简单和直观。我们可以通过Text组件来显…

重生归来之挖掘stm32底层知识(1)——寄存器

概念理解 要使用stm32首先要知道什么是引脚和寄存器。 如下图所示&#xff0c;芯片通过这些金属丝与电路板连接&#xff0c;这些金属丝叫做引脚。一般做软件开发是不需要了解芯片是怎么焊的&#xff0c;只要会使用就行。我们平常通过编程来控制这些引脚的输入和输出&#xff0c…

应用软件系统开发实操二:任务需求描述

工信部软件界信息技术服务业2020、2021、2022年度数据&#xff08;目前只有这3年的完整数据&#xff09;&#xff0c;以SQL的格式&#xff0c;存放在实操平台上&#xff0c;通过浏览器下载的方式获取。获取数据后&#xff0c;采用自己选择的技术对数据进行处理。阅读下面的要求…

php语言基本语法

HP&#xff08;Hypertext Preprocessor&#xff09;是一种广泛使用的开源服务器端脚本语言&#xff0c;特别适合于Web开发。 它能够嵌入到HTML中&#xff0c;执行动态网页内容。 PHP的一些基本语法元素&#xff1a; 1. 基本结构 PHP代码通常嵌入到HTML中&#xff0c;以<…

C/C++实现植物大战僵尸(PVZ)(打地鼠版)

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &#x1f680;感谢大家点赞&#x1f44d;收藏⭐评论✍ 游戏…

Django_Vue3_ElementUI_Release_003_前端Vue3项目初始化

1. 概念扫盲 Node.js是基于ChromeV8引擎&#xff0c;让JS在服务端运行的开发平台&#xff0c;就是JS的一种解释器WebPack就是模块打包机&#xff0c;把浏览器不能直接运行的拓展语言找到并打包为合适的格式给浏览器直接使用Vue基于WebPack构件项目的&#xff0c;并带有合理默认…

MoCo对比损失

MoCo&#xff08;Momentum Contrast&#xff0c;动量对比学习&#xff09;是一种自监督学习方法&#xff0c;由Facebook AI Research提出&#xff0c;主要用于无监督学习视觉表示。在MoCo中&#xff0c;对比损失&#xff08;Contrastive Loss&#xff09;扮演着至关重要的角色&…

在麒麟操作系统中查看进程运行时间

在麒麟操作系统中查看进程运行时间 1、使用ps命令查看进程运行时间1.1 基本命令结构1.2 示例&#xff1a;查看sshd进程的运行时间 2、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Linux操作系统中&#xff0c;包括麒麟&#xff08…

使用Mockito进行单元测试

1、单元测试介绍 Mockito和Junit是用于单元测试的常用框架。单元测试即&#xff1a;从最小的可测试单元&#xff08;如函数、方法或类&#xff09;开始&#xff0c;确保每个单元都能按预期工作。单元测试是白盒测试的核心部分&#xff0c;它有助于发现单元内部的错误。 单元测试…

【Hot100】LeetCode—84. 柱状图中最大的矩形

目录 1- 思路题目识别单调栈 2- 实现⭐84. 柱状图中最大的矩形——题解思路 3- ACM 实现 原题链接&#xff1a;84. 柱状图中最大的矩形 1- 思路 题目识别 识别1 &#xff1a;给定一个数组 heights &#xff0c;求解柱状图的最大面积 单调栈 使用 Stack 来实现&#xff0c;遍…

服务器上PFC配置丢失问题排查与解决方案

现象 基于nccl的多轨通信算力中心出现交换机端口出入方向丢包 分析 机间通信使用RoCE网络&#xff0c;为了避免因丢包导致大量重传报文影响训练性能&#xff0c;我们基于PFC和ECN在交换机和服务器配置搭建了无损网络&#xff0c;理论上是不允许丢包的&#xff0c;现在出现交…

时序差分法

一、时序差分法 时序差分是一种用来估计一个策略的价值函数的方法&#xff0c;它结合了蒙特卡洛和动态规划算法的思想。时序差分方法和蒙特卡洛的相似之处在于可以从样本数据中学习&#xff0c;不需要事先知道环境&#xff1b;和动态 规划的相似之处在于根据贝尔曼方程的思想&…