记 flip 简单的动画思路

请叫我海龟先生 等级 74 3 0
标签: dom动画

flip 一种简单的动画思路

无意间看到某博主文章,介绍关于 filp 如何制作动画,觉得有趣,便自己动手将dome实现了一遍,参考原文链接在此

FLIP

f - first 记录动画开始前的位置、大小等信息 ( translateY(0px) )
l - last 记录动画结束时的位置、大小等信息 ( translateY(100px) )
i - invert 对动画前后数据信息的计算(translateY --> 100px,同时利用translate等操作,将dom恢复到 first位置)
p - play 开始动画,并移除 i 步骤恢复至 first 的操作,启用tansition,动画就开始了

整个过程其实就是,记录好动画前后的dom位置等数据信息 然后,利用css将dom恢复至初始位置,最后移除上一步恢复的状态(此时dom会自动回到last位置,只不过没有过渡效果,生硬的闪现),添加过渡效果,完成动画

栗子一(卡片增删动画)

效果如下: 记 flip 简单的动画思路 思路整理:

需求分析: 1、没点击增加按钮,就创建一个dom,然后插入到当前列表前面 2、点击删除符号,就将其dom删除 实现1,2步骤不难,利用创建和删除dom的api即可
动画分析: 运用flip思路

1、f -- 记录当前dom的布局信息(getBoundingClientRect)可以实现< 2、l -- 同样运用 getBoundingClientRect 也可以获取到插入新增dom后的布局信息 3、i 和 p 过程,前两步拿到了 动画前动画后 布局信息的变化,接下来就是 i 过程,运用css translate3d将dom恢复至动画前的位置(即插入dom前) 4、p -- 移除translate3d的恢复,此时dom会恢复到插入后的位置,此时再添加过渡效果,就可以了

具体代码

增加按钮

function addBtn() {
  const divEle = document.getElementsByClassName('item')
   // 初始位置
   record(divEle)
   addEle()
   // 结束位置 + 复位 + play
   last(divEle)
}

记录初始位置

function record(eleAll) {
    for( let i = 0;i < eleAll.length; i++ ) {
        const { top,left } = eleAll[i].getBoundingClientRect()
        eleAll[i]._top_ = top
        eleAll[i]._left_ = left
    }
}

插入dom

function addEle() {
    const Box = document.getElementsByClassName('box')[0]
    const div = document.createElement('div'), span = document.createElement('span')

    span.className = 'del'
    div.className = 'item'
    div.innerHTML = index++
    div.appendChild(span)

    span.style.color = randomHexColorCode()
    div.style.borderColor = randomHexColorCode()
    div.style.zIndex = 'auto'

    span.onclick = delBtn

    Box.insertBefore(div,Box.childNodes[0])
}

结束位置+动画

function last(eleAll) {
   for( let i = 0;i < eleAll.length; i++ ) {
       const dom = eleAll[i]
       const { top,left } = dom.getBoundingClientRect()
       // 新增dom时,逻辑应为 原有dom后移动,新增dom不动,故记录了位置的才添加动画
       if(dom._left_) {
           // 恢复至开始位置
           dom.style.transform = `translate3d(${ dom._left_ - left }px, ${ dom._top_ - top }px,0px)`

           // play 过程,移除开始位置的设置,添加过渡
           requestAnimationFrame(function() {
               //启用tansition,并移除翻转的改变
               dom.classList.add('active')
               dom.style.transform = 'none'
           })
           dom.addEventListener('transitionend', () => {
               dom.classList.remove('active')
           })
           // 兼容性不好
           // dom.animate([
           //     { transform: `translate(${dom._left_ - left}px, ${dom._top_ - top}px)` },
           //     { transform: `translate(0px, 0px)` },
           // ], { duration: 400 })
       }

   }
}

栗子二(图片预览)

先看效果 记 flip 简单的动画思路 效果我们可以看出,图片从初始位置,移动到中心位置,并且是带动画效果逐渐放大的

分析 还是依托flip那几步骤

1、初始位置和结束位置getBoundingClientRect同样可以得到,无非就是再加上一个缩放比 2、同样地,过程还是动画前,先恢复至小图位置 3、移除恢复,添加过渡效果

代码

点击预览

let originTop = 0,originLeft = 0,scale = 0;
// 点击预览
function preview(e) {
    // 记录 first 位置
    recordImg(e)
    const { src } = e.childNodes[1]
    // 插入dom,获取 last 位置
    previewImg(src)

}

记录位置

function recordImg(ele) {
   const { top,left } = ele.getBoundingClientRect()
   originTop = top
   originLeft = left
}

预览

function previewImg(src) {
    const img = document.createElement('img')

    img.src = src
    img.className = 'preview_img'
    document.body.appendChild(img)

    img.onclick = previewClose
    // 图片加载onload问题,直接出现,暂时设置不可见
    img.style.display = 'none'

    img.onload = function() {
        img.style.display = 'block'
        // 计算缩放比
        scale = 50 / img.width
        // 获取 last 位置
        const { top,left } = img.getBoundingClientRect()
        img._top_ = top
        img._left_= left

        // 计算 invert 图片回归原位(first)
        img.style.transform = `translate3d(${ originLeft - left }px, ${ originTop - top }px,0px) scale(${scale})`
        img.style.transformOrigin = '0 0'
        // play 过程,移除回归原位的设置
        playImg(img)
    }

}

paly 过程

function playImg(ele) {
   requestAnimationFrame(function() {
       //启用tansition,并移除翻转的改变
       ele.style.transform = `translate3d(0px,0px,0px) scale(1)`
       ele.style.zIndex = `2`
       // 遮罩
       const preview = document.getElementsByClassName('preview')[0]
       preview.style.opacity = '1'
       preview.style.zIndex = '1'

       preview.classList.add('active_preview')
       ele.classList.add('active2')
   })
}

个人理解,flip是一种做动画的思路,当面对一些复杂,难以通过一些简单的过渡来实现的,可以采取此思路

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,h3{
            padding: 0;
            margin: 0;
        }
        .all{
            padding: 30px;
            width: 700px;
            margin: 0 auto;
        }
        h3{
            padding: 10px 0;
        }
        .box{
            padding: 30px;
            min-height: 100px;
            overflow: hidden;
            border: 1px solid greenyellow;
        }
        .item{
            width: 150px;
            height: 150px;
            border: 2px solid #e8e8e8;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 10px;
            margin-right: 12px;
            float: left;
            background-color: #fff;
            padding: 5px;
        }
        .item:hover{
            box-shadow: 0px 0px 15px #eee;
            transform: translate3d(0px,2px,0px);
            transition: all .3s ease-out;
        }
        .item:nth-child(4n) {
            margin-right: 0px;
        }
        .del{
            float: right;
            display: flex;
            padding: 5px;
            width: 10px;
            height: 10px;
            position: relative;
            margin-right: 10px;
            cursor: pointer;
        }
        .del::before{
            content: '一';
            position: absolute;
            top: 0;
            transform: rotateZ(45deg);
        }
        .del::after{
            content: '一';
            position: absolute;
            top: 0px;
            transform: rotateZ(-45deg);
        }
        .active{
            transition: transform 400ms ease-out;
        }
        .active2{
            transition: all .6s ease-in-out;
        }
        .active_preview{
            transition: opacity .6s ease-in-out;
        }
        hr{
            margin: 20px 0;
        }
        .item_img{
            width: 50px;
            display: inline-flex;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }
        .item_img:hover::before {
            opacity: 1;
        }
        .item_img::before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            background-color: rgba(0,0,0,.5);
            transition: all .3s;
            z-index: 1;
        }
        .item_img img{
            width: 100%;
        }
        .preview{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.7);
            z-index: -1;
            opacity: 0;
        }
        .preview_img{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="all" >
        <h3>
            <span>flip动画</span>
            <button onclick="addBtn()" > 增加 </button>
        </h3>
        <div class="box" >
            <div class="item"></div>
        </div>
    </div>
    <hr>
    <!-- 图片预览 -->
    <h3>
        <span>图片预览</span>
    </h3>
    <div class="box"  style="max-width: 800px;" >
        <div class="item_img" onclick="preview(this)" >
            <img src="https://i.picsum.photos/id/155/467/680.jpg?hmac=sWw0LvYr7xc_V-bjOgZgwCTKCrWXXAfFzTLR5E16jG8" alt="">
        </div>
    </div>
    <!-- 预览区域 -->
    <div class="preview"></div>
    <script>
        // flip 动画思路
        /**
         * f - first 记录动画开始前的位置、大小等信息 ( translateY(0px) )
         * l - last  记录动画结束时的位置、大小等信息 ( translateY(100px) )
         * i - invert 对动画前后数据信息的计算(translateY --> 100px,同时利用translate等操作,将dom恢复到 first位置)
         * p - play 开始动画,并移除 i 步骤恢复至 first 的操作,启用tansition,动画就开始了
         * 
         * 整个过程其实就是,先记录好动画前后的dom位置等数据信息
         * 然后,利用css将dom恢复至初始位置
         * 最后,移除上一步恢复的状态(此时dom会自动回到last位置,只不过没有过渡效果,生硬的闪现),添加过渡效果,完成动画
         * **/ 
        let index = 1
        // 增加 按钮
        function addBtn() {
            const divEle = document.getElementsByClassName('item')
            // 初始位置
            record(divEle)
            addEle()
            // 结束位置 + 复位 + play
            last(divEle)
        }
        // 记录初始位置
        function record(eleAll) {
            for( let i = 0;i < eleAll.length; i++ ) {
                const { top,left } = eleAll[i].getBoundingClientRect()
                eleAll[i]._top_ = top
                eleAll[i]._left_ = left
            }
        }
        // 插入dom,此时dom结构已经发生变化
        function addEle() {
            const Box = document.getElementsByClassName('box')[0]
            const div = document.createElement('div'), span = document.createElement('span')

            span.className = 'del'
            div.className = 'item'
            div.innerHTML = index++
            div.appendChild(span)

            span.style.color = randomHexColorCode()
            div.style.borderColor = randomHexColorCode()
            div.style.zIndex = 'auto'

            span.onclick = delBtn

            Box.insertBefore(div,Box.childNodes[0])
        }
        // 结束位置
        function last(eleAll) {
            for( let i = 0;i < eleAll.length; i++ ) {
                const dom = eleAll[i]
                const { top,left } = dom.getBoundingClientRect()
                // 新增dom时,逻辑应为 原有dom后移动,新增dom不动,故记录了位置的才添加动画
                if(dom._left_) {
                    /**
                     * flip 思路:
                     * 1、计算出开始和结束的状态差
                     * 2、dom变化后,通过transform直接让dom位于最开始状态
                     * 3、添加 transition ,移除 transform(让dom位于初始状态的属性)
                     * 4、dom 自动恢复结束状态
                     * **/ 
                    // 恢复至开始位置
                    dom.style.transform = `translate3d(${ dom._left_ - left }px, ${ dom._top_ - top }px,0px)`

                    // play 过程,移除开始位置的设置,添加过渡
                    requestAnimationFrame(function() {
                        //启用tansition,并移除翻转的改变
                        dom.classList.add('active')
                        dom.style.transform = 'none'
                    })
                    dom.addEventListener('transitionend', () => {
                        dom.classList.remove('active')
                    })
                    // 兼容性不好
                    // dom.animate([
                    //     { transform: `translate(${dom._left_ - left}px, ${dom._top_ - top}px)` },
                    //     { transform: `translate(0px, 0px)` },
                    // ], { duration: 400 })
                }

            }
        }
        // 删除
        function delBtn({ target }) {
            const divEle = document.getElementsByClassName('item')
            record(divEle)
            delEle(target)
            last(divEle)
        }
        // 删除 dom
        function delEle(target) {
            target.parentNode.remove()
        }


        // ----------图片预览--------
        // 图片原始位置
        let originTop = 0,originLeft = 0,scale = 0;
        // 点击预览
        function preview(e) {
            // 记录 first 位置
            recordImg(e)
            const { src } = e.childNodes[1]
            // 插入dom,获取 last 位置
            previewImg(src)

        }
        // first 记录位置
        function recordImg(ele) {
            const { top,left } = ele.getBoundingClientRect()
            originTop = top
            originLeft = left
        }
        // 预览
        function previewImg(src) {
            const img = document.createElement('img')

            img.src = src
            img.className = 'preview_img'
            document.body.appendChild(img)

            img.onclick = previewClose
            // 图片加载onload问题,直接出现,暂时设置不可见
            img.style.display = 'none'

            img.onload = function() {
                img.style.display = 'block'
                // 计算缩放比
                scale = 50 / img.width
                // 获取 last 位置
                const { top,left } = img.getBoundingClientRect()
                img._top_ = top
                img._left_= left

                // 计算 invert 图片回归原位(first)
                img.style.transform = `translate3d(${ originLeft - left }px, ${ originTop - top }px,0px) scale(${scale})`
                img.style.transformOrigin = '0 0'
                // play 过程,移除回归原位的设置
                playImg(img)
            }

        }
        // paly 过程
        function playImg(ele) {
            requestAnimationFrame(function() {
                //启用tansition,并移除翻转的改变
                ele.style.transform = `translate3d(0px,0px,0px) scale(1)`
                ele.style.zIndex = `2`
                // 遮罩
                const preview = document.getElementsByClassName('preview')[0]
                preview.style.opacity = '1'
                preview.style.zIndex = '1'

                preview.classList.add('active_preview')
                ele.classList.add('active2')
            })
        }
        // 点击缩小
        function previewClose({ target }) {
            target.style.transform = `translate3d(${ originLeft - target._left_ }px, ${ originTop - target._top_ }px,0px) scale(${scale})`

            const preview = document.getElementsByClassName('preview')[0]
            preview.style.opacity = '0'

            target.addEventListener('transitionend', () => {
                target.remove()
                preview.style.zIndex = '-1'
            })


        }
        // 随机颜色
        function randomHexColorCode() {
            let n = (Math.random() * 0xfffff * 1000000).toString(16);
            return '#' + n.slice(0, 6);
        };
    </script>
</body>
</html>
收藏
评论区

相关推荐

React 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
03. react 初次见面
    与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 1、将元素渲染到 DOM 中 --------------     首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>: <div id="root">
DOM
跨站脚本攻击(Cross-site scripting,通常简称为XSS)发生在客户端,可被用于进行窃取隐私、钓鱼欺骗、偷取密码、传播恶意代码等攻击行为。可以分为反射型、存储型、DOM型等,本文主要讲解**DOM-XSS漏洞挖掘与攻击面延申**。接下来就开门见山,讲解干货吧。 **DOM-XSS典型应用场景*
DOM查询
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"
Angular 学习系列
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,本兽会将功能相似相近的一类整合到一篇文章,方便理解和记忆。 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断。 **ngIf** ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。 **格式**:ng-if=“valu
Echarts异步获取数据,刷新实例
function orgEcharts(){ var echartsData = [["年份"],["新训"],["复训"]]; var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app =
JavaScript DOM初学笔记
1\. DOM简介 ========= 1\. 1 什么是DOM ------------ **文档对象模型**(**Document Object Model**,简称 DOM),是 W3C组织推荐的处理可扩展标记语言(HTML 或者标准编程接口。 1.2 DOM树 -------- ![HTML DOM Node Tree](https://st
JavaScript DOM编程艺术(第2版)学习笔记1(1~4章)
**第一章 一些基本概念** -------------- HTML(超文本标记语言),构建网页的静态结构,由一系列的DOM组成; CSS(层叠样式表),给网页各部分结构添加样式; JavaScript,通过获取DOM给静态结构加上动作,使用户能够与静态网页进行交互; DOM,一种API(应用程序接口),通过这个接口动态的访问和修改结构或样式。 浏
JavaScript基础
**_1,js组成_** ------------ ###         核心:ECMAScript标准                   此标准指定了js的基础语法,数据类型,关键字,操作符,对象; ###         DOM:文档对象模型标准(Document object Model)                   是js针对xm
JavaScript的BOM和DOM
1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话". DOM(Document Object Model)是指文档对象类型,通过它,可以访问HTML文档的所有元素 window对象客户端JavaScript最高
Jquery元素追加和删除
**介绍**    DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 **1、DOM Core**     DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。     例如:
NIO之Buffer的clear()、rewind()、flip()方法的区别
Java的NIO中有关Buffer的几种常用方法比如clear,rewind和flip到底有哪些区别。下面给大家这三种方法的源码,方便大家记忆。 clear()方法用于写模式,其作用为情况Buffer中的内容,所谓清空是指写上限与Buffer的真实容量相同,即limit==capacity,同时将当前写位置置为最前端下标为0处。代码如下: 1. pu
React的虚拟DOM
上一篇文章中,DOM树的信息可以用JavaScript对象来表示,反过来,可以根据这个用JavaScript对象表示的树结构来真正构建一颗DOM树。 用JavaScript对象表示DOM信息和结构,当状态变更的时候,重新渲染这个JavaScript的对象结构,当然这样做,其实并没有更新到真正的页面上。 但是可以用新渲染的对象树和旧的树进行对比,记录这两棵树
Vue diff 算法
一、虚拟 DOM (virtual dom) ----------------------   diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM(virtual dom),更新真实 DOM 是 diff 算法的结果。   注:virtual dom 可以看作是一个使用 JavaScript 模拟了 DOM结构 的树形结构,这个树结构包含
记 flip 简单的动画思路
flip 一种简单的动画思路无意间看到某博主文章,介绍关于 filp 如何制作动画,觉得有趣,便自己动手将dome实现了一遍, FLIPf first 记录动画开始前的位置、大小等信息 ( translateY(0px) ) l last 记录动画结束时的位置、大小等信息 ( translateY(100px) )i invert 对动画前后数据信息