用html做的简版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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<button id="btn_add">添加</button>
<div class="container"></div>
<script>
let divs = null;
const btnAdd = document.querySelector("#btn_add");
const container = document.querySelector(".container");
const data = [
{ id: 1, c: "red" },
{ id: 2, c: "pink" },
{ id: 3, c: "purple" },
{ id: 4, c: "orange" },
{ id: 4, c: "yellow" },
];
// 立即执行函数, 初始渲染 页面的 5 个彩色盒子
      (function render() {
let html = "";
for (let i = 0; i < data.length; i++) {
html += `<div style="background-color: ${data[i].c}">${data[i].id}</div>`;
        }
container.innerHTML = html;
})();
// 函数 获取随机颜色
function getColor() {
const r = () => parseInt(Math.random() * 256);
return `rgb(${r()},${r()},${r()})`;
}
// 按钮点击事件
      btnAdd.addEventListener("click", () => {
// 获取最新的 div 节点集合
        divs = document.querySelectorAll(".container div");
// 旧的位置
        const oldRect = getRect(divs);
// 添加元素
        const div = document.createElement("div");
div.innerText = data.length + 1;
div.style.background = getColor();
container.insertBefore(div, divs[0]);
// 获取渲染之后的位置
        const newRect = getRect(divs);
// 核心原理: 假如有a, b两个节点, c 和 d 两个位置
// 开始页面只有一个 a 节点, a 节点在 c 位置
// 插入一个 b 节点在 a 前面之后, a 节点的位置 从 c 到了 d
// 我们知道 a 节点在插入前的 位置 c 和 插入后的位置 d
// 那么渲染的时候, 新插入节点 b 固定在 a 位置
// a 节点 会出现在 d 位置, 然后通过 css3 转换, 移动到 c 位置 (最开始)
// 然后 a 节点 从 c 缓慢移动到 d  <== 动画
// 就造成了的 b 把 a 挤过去 的假象
for (let i = 0; i < divs.length; i++) {
const left = -(newRect[i].left - oldRect[i].left);
const top = -(newRect[i].top - oldRect[i].top);
const animate = [
{
transform: `translate(${left}px, ${top}px)`,
},
{
transform: "translate(0, 0)",
},
];
divs[i].animate(animate, 300);
}
});
// 函数 获取元素的具体方位
function getRect(doms) {
const domArea = [];
for (let i = 0; i < doms.length; i++) {
const rect = doms[i].getBoundingClientRect();
domArea.push({
top: rect.top,
left: rect.left,
});
}
return domArea;
}
</script>
</body>
</html>

 

本想把生活活成一首诗, 时而优雅 , 时而豪放 , 结果活成了一首歌 , 时而不靠谱 , 时而不着调

推荐这些文章:

导航分两部分的第一部分

<body>
<div class="top-nav">
<div class="container">
<ul>
<li><a href="">请先登录</a></li>
<li><a href="">免费注册</a></li>
<li><a href="">我的订单<...

这是我的代码 怎么能够让时间和内容布置在textarea的左上方啊?跪求html+css大神

问题
代码如下:
<body onload="init()"> <div class="contentlayout3" style ="text-align:center"> @using (Html.BeginForm()) { <div style="text-align:left; width:98%"> <h3>时间</h3> </div> <div width:98%"> @Html.TextBoxFor(m => m.RecordTime, new { @style...

HTML标签元素常用列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签(Basic Tags)

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> ....

简单电子日历.html

电子日历!

点击查看代码
<!DOCTYPE html>
<html>
<head>
<title>简单电子日历的设计与实现</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.cnblogs.com/fzlgxy085/p/css/calendar.css">
<script src="https://www.cnblogs.com/fzlgxy085/p/js/calen...

去除button默认样式

不加样式之前的: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <button>按钮</button> </body> </html>...

在高度不确定的情况下让div垂直和水平局中的终极解决方案(CSS3写法)

<div class='contain' ></div> <style> .contain { position: fixed; top: 50%; left: 50%; width: 600px; height: auto; transform: translateX(-50%) translateY(-50%); } </style>    ...

HTML 注册案例 学习 制作

1. 案例目标

2. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Do...

商务风格表格的设计与实现.html

2.商务风格表格的设计与实现.html
这个也是简单的实践。
<head>
<meta charset="utf-8">
<title>商务风格表格的设计与实现</title>
<style>
/*设置表格总体样式*/
#recruit {
width: 100%;
border-collapse: collapse;
text-align: left...

HTML的骨架标签

 
 

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

 

...

五、动态绑定属性(style)

一、v-bind动态绑定style(对象语法)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
<style >
.liClinkClass {
color: red;
...

文章标题:用html做的简版flip动画
文章链接:https://www.dianjilingqu.com/51470.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>