Vanessa 2023-09-25 21:04:07 +08:00
parent 56897ad3c8
commit 9409f46287
3 changed files with 33 additions and 7 deletions

View file

@ -2,6 +2,27 @@
user-select: none;
box-sizing: border-box;
&__pulse {
width: 70%;
height: 26px;
position: relative;
overflow: hidden;
background: var(--b3-border-color);
border-radius: var(--b3-border-radius);
&:after {
content: " ";
border-radius: var(--b3-border-radius);
position: absolute;
z-index: 1;
animation: 1s linear infinite keyframes-pulse;
background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.4) 50%,transparent 100%);
display: block;
height: 100%;
width: 100%;
}
}
&:hover .av__row--footer > .av__calc--show {
opacity: 1;
}
@ -249,11 +270,6 @@
&:hover svg {
opacity: 1;
}
img {
height: 36px;
width: 24px;
}
}
&__widthdrag {

View file

@ -1,3 +1,13 @@
@keyframes keyframes-pulse {
0% {
transform: translateX(-100%) translateZ(0)
}
100% {
transform: translateX(100%) translateZ(0)
}
}
@keyframes addCard {
0% {
box-shadow: -100vw 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;

View file

@ -359,13 +359,13 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
let colHTML = "";
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
colHTML += `<div class="av__cell" style="width: ${item.style.width}"></div>`;
colHTML += `<div class="av__cell" style="width: ${item.style.width}"><span class="av__pulse"></span></div>`;
});
let html = "";
new Array(size).fill(1).forEach(() => {
html += `<div class="av__row">
<div class="av__firstcol"><img src="/stage/loading-pure.svg"></div>
<div style="width: 24px"></div>
${colHTML}
</div>`;
});