103 lines
3.8 KiB
JavaScript
103 lines
3.8 KiB
JavaScript
import { div, button, h1 } from "@laniakeasupercluster/widgets";
|
|
import { reactive } from "./reactive.js";
|
|
|
|
// 工具函数：生成随机字符串
|
|
const generateRandomString = (length) => {
|
|
const chars =
|
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
return Array.from({ length }, () =>
|
|
chars.charAt(Math.floor(Math.random() * chars.length))
|
|
).join("");
|
|
};
|
|
|
|
// 创建对象数组，限制内容最大长度为 100
|
|
const objectArray = Array.from({ length: 10 }, (_, index) => ({
|
|
id: index + 1,
|
|
title: `标题${index + 1}`,
|
|
content: generateRandomString(Math.min(100, 100)), // 控制内容长度，最大不超过 100
|
|
}));
|
|
|
|
// 响应式数据
|
|
const data = reactive(objectArray)
|
|
|
|
document.body.appendChild(
|
|
div.bg("#ffffff").p("1rem").childs([
|
|
new button({
|
|
textContent: "切换内容显示",
|
|
onclick: (event) => {
|
|
const contentItems = event.target.nextElementSibling.children;
|
|
const isHidden = event.target.dataset.isHidden === "true";
|
|
event.target.dataset.isHidden = !isHidden;
|
|
|
|
Array.from(contentItems).forEach((item) => {
|
|
// 显示隐藏阴影
|
|
if (!item.dataset.originalBoxShadow) {
|
|
item.dataset.originalBoxShadow = item.style.boxShadow;
|
|
}
|
|
const boxShadow = item.dataset.originalBoxShadow;
|
|
const boxShadowAnimate = [{ boxShadow }, { boxShadow: "none" }];
|
|
const finalBoxShadowAnimation = isHidden ? boxShadowAnimate.reverse() : boxShadowAnimate;
|
|
item.animate(finalBoxShadowAnimation, { duration: 750, easing: "ease", fill: "forwards" })
|
|
|
|
// 显示隐藏内容
|
|
const content = item.lastElementChild;
|
|
if (!content.dataset.originalHeight) {
|
|
content.dataset.originalHeight = content.scrollHeight // 存储原始高度
|
|
}
|
|
const height = content.dataset.originalHeight + "px";
|
|
|
|
const animation = [
|
|
{ transform: "scaleY(1)", opacity: 1, height },
|
|
{ transform: "scaleY(0)", opacity: 0, height: 0 },
|
|
];
|
|
const finalAnimation = isHidden ? animation.reverse() : animation;
|
|
content.animate(finalAnimation, { duration: 750, easing: "ease", fill: "forwards" })
|
|
content.style.height = isHidden ? height : "0"; // 动态设置高度
|
|
});
|
|
},
|
|
}),
|
|
new div({
|
|
style: {
|
|
display: "flex",
|
|
padding: "1rem 0",
|
|
flexDirection: "column",
|
|
wordWrap: "break-word",
|
|
},
|
|
}).childs(
|
|
data.map(item => new div({
|
|
style: {
|
|
backgroundColor: "#ffffff",
|
|
boxShadow: "3px 3px 15px rgba(0, 0, 0, 0.1)",
|
|
borderRadius: ".25rem",
|
|
padding: ".5rem",
|
|
marginBottom: "1rem",
|
|
},
|
|
children: [
|
|
div.text(item.title),
|
|
div.text(item.content).h("4rem"),
|
|
],
|
|
onclick: function (event) {
|
|
if (this.dataset.lock) return
|
|
this.dataset.lock = true
|
|
const height = `${this.scrollHeight}px`
|
|
const { marginTop, marginBottom, paddingTop, paddingBottom } = this.style
|
|
console.log(marginTop, marginBottom, paddingTop, paddingBottom, height)
|
|
const animation = [
|
|
{ transform: "scaleY(1)", opacity: 1, height, marginTop, marginBottom, paddingTop, paddingBottom },
|
|
{ transform: "scaleY(0)", opacity: 0, height: 0, marginTop: 0, marginBottom: 0, paddingTop: 0, paddingBottom: 0 },
|
|
]
|
|
this.animate(animation, { duration: 750, easing: "ease", fill: "forwards" }).onfinish = () => {
|
|
console.log('动画完成，删除元素')
|
|
data.splice(data.indexOf(item), 1)
|
|
//this.remove()
|
|
}
|
|
},
|
|
}))
|
|
),
|
|
])
|
|
);
|
|
|
|
document.body.style.margin = 0;
|
|
document.body.style.padding = 0;
|
|
document.body.style.backgroundColor = "rgba(37, 99, 235, 1)";
|