网站做会员系统,国内网站空间购买,山西太原今天重大新闻,建设旅游网站的总结FLIP技术可以让我们的动画更加流畅#xff0c;同时也能降低复杂动画的开发难度
名词解释#xff0c;FLIP是几个英文单词的缩写#xff0c;简单介绍一下#xff1a;
F#xff1a;Fist —— 一个元素的起始位置
L#xff1a;Last —— 另一个元素的终止位置#xff0c;…FLIP技术可以让我们的动画更加流畅同时也能降低复杂动画的开发难度
名词解释FLIP是几个英文单词的缩写简单介绍一下
FFist —— 一个元素的起始位置
LLast —— 另一个元素的终止位置注意另一个这个词后面会有具体代码的体现
IInvert —— 计算F与L的差异包括位置大小等并将差异用transform属性添加到终止元素上让它回到起始位置也是此项技术的核心
PPlay —— 添加transtion 过渡效果清除Invert阶段添加进来transform播放动画
1、处理一下蒙层的逻辑
我们先把外部简单逻辑处理一下根据效果有一个点击蒙层关闭的操作代码如下 let mask_dom document.getElementsByClassName(mask)[0]
let pic_dom document.getElementById(pic)
mask_dom.addEventListener(click, (e) {mask_dom.style.display nonepic_dom.innerHTML
})需要注意的是关闭的同时我们还要清理承载放大图的div
2、dom比较多使用事件代理
let container_dom document.getElementsByClassName(container)[0]
container_dom.addEventListener(click, (e) {//获得点击位置的dom节点
let boxDom e.target
//判断点击的是不是模拟图片的dom
if(boxDom.className.indexOf(box) -1){return
}
// 打开蒙层mask_dom.style.display block
//克隆被点击的节点let cloneDom boxDom.cloneNode(true)
})3、Fist获得起始位置dom的位置信息 //第一步、获得初始位置信息
let firstInfo boxDom.getBoundingClientRect()4、Last获取结束时的位置信息 //第二步、获取结束时的位置信息——添加全局居中样式cloneDom.className cloneDom.className picture-zoom-in
//第二步、获取结束时的位置信息——放到容器中pic_dom.appendChild(cloneDom)
//第二步、获取结束时的位置信息
let lastInfo cloneDom.getBoundingClientRect()5、Invert计算差异
//第三步、计算变化的数据数据
let invertInfo {x: firstInfo.x - lastInfo.x,y: firstInfo.y - lastInfo.y,
}
// 第三步、计算变化的数据数据 - 将克隆节点赋值变化的数据 回到初始位置
//特别说明 由于有scale会导致transformOrigin发生变化在修改scale时需要将transformOrigin归零
cloneDom.style.transformOrigin 0 0
cloneDom.style.transform scale(1) translate(calc(-100% ${invertInfo.x}px),calc(-100% ${invertInfo.y}px))6、play播放动画
//第四步、设定过度动画删除第三步的transform
setTimeout(() {cloneDom.style.transition all .5scloneDom.style.transformOrigin cloneDom.style.transform
}) 下面是全部代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleFLIP-demo/titlestyle.container {display: flex;flex-wrap: wrap;text-align: center;}.box {border:1px solid #ccc;margin-left: 10px;margin-top: 10px;}.box_0{width: 200px;height: 250px;background-color: #ffa39e;color: #000000;line-height:250px;}.box_1 {width: 160px;height: 210px;background-color:#ffd8bf;line-height: 210px;}.box_2 {width: 190px;height: 270px;background-color:#ffd591;line-height:270px;}.box_3 {width: 210px;height: 300px;background-color:#ffe58f;line-height:300px;}.box_4 {height: 160px;width: 210px;background-color:#780650;color:#ffffff;line-height:160px;}.box_5 {height: 190px;width: 270px;background-color:#22075e;color:#ffffff;line-height:190px;}.box_6 {height: 210px;width: 300px;background-color:#061178;color:#ffffff;line-height:210px;}.mask{position: fixed;width: 100%;height: 100%;background: #000000;opacity: 0.7;z-index: 1;display: none;text-align: center;}.picture-zoom-in{position: fixed;z-index: 2;left: 50%;top: 50%;transform: translate(-50% ,-50%) scale(2) ;text-align: center;}/style
/headbody!-- 蒙层 --div classmask/div!-- 放大图片的容器 --div idpic/div!-- 图片容器及列表 --div classcontainerdiv classbox box_0200px*250px/divdiv classbox box_0200px*250px/divdiv classbox box_0200px*250px/divdiv classbox box_0200px*250px/divdiv classbox box_1160px*210px/divdiv classbox box_2190px*270px/divdiv classbox box_3210px*300px/divdiv classbox box_4210px*160px/divdiv classbox box_5270px*190px/divdiv classbox box_6300px*210px/div/divscriptlet container_dom document.getElementsByClassName(container)[0]let mask_dom document.getElementsByClassName(mask)[0]let pic_dom document.getElementById(pic)mask_dom.addEventListener(click, (e) {mask_dom.style.display nonepic_dom.innerHTML })//dom 比较多采用事件代理container_dom.addEventListener(click, (e) {//获得点击位置的dom节点let boxDom e.target//判断点击的是不是模拟图片的domif(boxDom.className.indexOf(box) -1){return}// 打开蒙层mask_dom.style.display block//克隆被点击的节点let cloneDom boxDom.cloneNode(true)//第一步、获得初始位置信息let firstInfo boxDom.getBoundingClientRect()//第二步、获取结束时的位置信息——添加全局居中样式cloneDom.className cloneDom.className picture-zoom-in//第二步、获取结束时的位置信息——放到容器中pic_dom.appendChild(cloneDom)//第二步、获取结束时的位置信息let lastInfo cloneDom.getBoundingClientRect()//第三步、计算变化的数据数据 let invertInfo {x: firstInfo.x - lastInfo.x,y: firstInfo.y - lastInfo.y,}// 第三步、计算变化的数据数据 - 将克隆节点赋值变化的数据 回到初始位置 //特别说明 由于有scale会导致transformOrigin发生变化在修改scale时需要将transformOrigin归零cloneDom.style.transformOrigin 0 0cloneDom.style.transform scale(1) translate(calc(-100% ${invertInfo.x}px),calc(-100% ${invertInfo.y}px))//第四步、设定过度动画删除第三步的transformsetTimeout(() {cloneDom.style.transition all .5scloneDom.style.transformOrigin cloneDom.style.transform })})/script
/body/html
