在上傳(Upload)按鈕上動畫顯示文件上傳狀態提示
作者:admin 時間:2023-2-2 16:57:13 瀏覽:在上傳(Upload)按鈕上面動畫顯示文件上傳狀態，這種設計比較新穎，比較少人使用，但這種設計挺有趣的，本文便給大家介紹一個實例。
實例介紹
點擊Upload按鈕時，按鈕以動畫方式顯示“正在上傳”的狀態，待上傳完畢（可用JS判斷），按鈕上顯示“Done”的文字。
HTML代碼
HTML使用一個button標簽作為按鈕，樣式使用的類是upload-button。
button按鈕標簽內部使用了兩個svg代碼，第一個svg實現上傳完畢后的提示，第二個svg是該按鈕的畫布。
class="default"這個div是默認狀態顯示；class="success"這個div是上傳完畢狀態顯示；class="dots"這個div是上傳過程狀態提示。
<button class="upload-button">
<div class="default">
<div>Upload</div>
</div>
<div class="success">
<svg viewBox="0 0 13 10">
<path d="M1 5L4.66667 9L12 1" />
</svg>
<div>Done</div>
</div>
<div class="dots">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<svg viewBox="0 0 132 52">
<path
d="M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z"
/>
</svg>
</button>
CSS代碼
CSS代碼主要是包含一個.upload-button的樣式設計，包含各種狀態的樣式，如默認(.default)樣式、成功(.success)樣式、進行時(.dots)樣式，還有svg畫布的樣式等等。
.upload-button {
font-family: "Poppins", Arial;
font-size: 16px;
font-weight: 600;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #fff;
background: none;
border: none;
outline: none;
cursor: pointer;
width: 128px;
padding: 0;
margin: 0;
text-align: center;
line-height: 20px;
position: relative;
filter: drop-shadow(0px 4px 12px rgba(118, 70, 215, 0.1));
transform: translateZ(0);
}
.upload-button > svg {
display: block;
width: 132px;
height: 52px;
fill: #7646d7;
pointer-events: none;
margin: -4px -2px;
transition: fill 0.2s, transform 0.1s;
transform: translateZ(0);
}
.upload-button:hover > svg {
fill: #6f3bda;
}
.upload-button:active > svg {
transform: scale(0.975) translateZ(0);
}
.upload-button .default,
.upload-button .success {
top: 12px;
bottom: 12px;
left: 0;
right: 0;
position: absolute;
display: block;
z-index: 1;
}
.upload-button .default > div,
.upload-button .success > div {
display: inline-block;
vertical-align: top;
}
.upload-button .default > div > div span,
.upload-button .success > div > div span {
display: inline-block;
vertical-align: top;
transform-origin: 50% 100%;
transform: translateZ(0);
}
.upload-button .success svg {
width: 13px;
height: 10px;
fill: none;
stroke: currentColor;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 2;
display: inline-block;
vertical-align: top;
margin: 5px 4px 5px 0;
stroke-dasharray: 17px;
stroke-dashoffset: 17px;
transform: translateZ(0);
}
.upload-button .success > div > div span {
opacity: 0;
transform: scale(0.25) translateZ(0);
}
.upload-button .dots {
top: 19px;
bottom: 19px;
left: 0;
right: 0;
position: absolute;
display: flex;
justify-content: center;
z-index: 1;
}
.upload-button .dots span {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
margin: 0 3px;
transform: translateY(6px) scale(0);
}JavaScript代碼
該實例需要用到JS配合實現，還需要引用兩個JS庫文件（庫文件已經包含在源碼下載壓縮包里）。
<script src='gsap.min.js'></script>
<script src='MorphSVGPlugin3.min.js'></script>
const { to, set } = gsap;
gsap.registerPlugin(MorphSVGPlugin);
document.querySelectorAll(".upload-button").forEach(button => {
const path = button.querySelector(":scope > svg path");
const dots = button.querySelectorAll(".dots span");
button.
querySelectorAll(".default > div, .success > div").
forEach(
(state) =>
state.innerHTML =
"<div><span>" +
state.textContent.trim().split("").join("</span><span>") +
"</span></div>");
const defaultLetters = button.querySelectorAll(".default span");
const successLetters = button.querySelectorAll(".success span");
const successTick = button.querySelector(".success svg");
const reset = () => {
to(successTick, {
strokeDashoffset: "17px",
duration: 0.15 });
to(successLetters, {
stagger: 0.075,
scale: 0.25,
opacity: 0,
duration: 0.15,
onComplete: () => {
to(defaultLetters, {
stagger: 0.075,
scale: 1,
opacity: 1,
duration: 0.15,
onComplete: () => button.active = false });
} });
};
button.addEventListener("click", () => {
if (button.active) {
return;
}
button.active = true;
to([...defaultLetters].reverse(), {
stagger: 0.075,
keyframes: [
{
scale: 1.075,
duration: 0.15 },
{
scale: 0.2,
opacity: 0,
duration: 0.2 }],
onComplete: () => {
to(dots, {
stagger: 0.075,
keyframes: [
{
y: -5,
scale: 1,
duration: 0.25 },
{
y: 5,
duration: 0.25 },
{
y: -5,
duration: 0.25 },
{
y: 5,
duration: 0.25 },
{
y: -5,
duration: 0.25 },
{
y: 5,
scale: 0,
duration: 0.25 }] });
to(path, {
keyframes: [
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z" }],
onComplete: () => {
to(successTick, {
strokeDashoffset: "0px",
duration: 0.2,
onComplete: () => {
to(successLetters, {
stagger: 0.075,
keyframes: [
{
scale: 1.1,
opacity: 1,
duration: 0.15 },
{
scale: 1,
duration: 0.15 }],
onComplete: () => {
to(button, {
keyframes: [
{
scale: 1.05,
duration: 0.15 },
{
scale: 1,
duration: 0.1,
clearProps: true }],
onComplete: () => {
setTimeout(reset, 2000);
} });
} });
} });
} });
} });
});
});總結
本文介紹了在上傳(Upload)按鈕上動畫顯示文件上傳狀態提示，喜歡的朋友可以收藏，或下載源碼直接使用。
相關文章
標簽: 文件上傳按鈕
相關文章
x
- 站長推薦
