CSS100Day(15)-上传组件的显示变化

1
<div class="frame">
2
    <div class="center">
3
        <div class="title">拖拽上传</div>
4
        <div class="bar"></div>
5
        <div class="dropZone">
6
            <div class="content">
7
                <img src="https://100dayscss.com/codepen/upload.svg" class="upload" />
8
                <div class="filename">xxx</div>
9
                <input type="file" class="input" />
10
            </div>
11
        </div>
12
        <img src="https://100dayscss.com/codepen/syncing.svg" class="syncing" />
13
        <img src="https://100dayscss.com/codepen/checkmark.svg" class="done" />
14
        <div class="upload-btn">上传文件</div>
15
    </div>
16
</div>

1
:root {
2
    box-sizing: border-box;
3
}
4

5
.frame {
6
    width: 400px;
7
    height: 400px;
8
    position: relative;
9
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
10
    color: white;
11
    border-radius: 2px;
12
    background: linear-gradient(to top right, #3a92af 0%, #5ca05a 100%);
13
    display: grid;
14
    place-content: center;
15
}
16

17
.center {
18
    width: 300px;
19
    height: 260px;
20
    background: #fff;
21
    display: flex;
22
    flex-direction: column;
23
    border-radius: 3px;
24
    align-items: center;
25
    position: relative;
26

27
    .title {
28
        font-size: 16px;
29
        color: #676767;
30
        text-align: center;
31
        height: 50px;
32
        line-height: 50px;
33
        border-bottom: 1px solid #d8d8d8;
34
        width: 100%;
35
    }
36

37
    .bar {
38
        position: absolute;
39
        width: 300px;
40
        height: 3px;
41
        top: 49px;
42
        left: 0;
43
        background: #6ece3b;
44
        transform: scaleX(0);
45
        transition: all 3s ease-out;
46
        transform-origin: 0 0;
47

48
        &.active {
49
            transform: scaleX(1);
50
        }
51
    }
52

53
    .dropZone {
54
        display: grid;
55
        place-content: center;
56
        height: 150px;
57

58
        .content {
59
            width: 100px;
60
            height: 80px;
61
            border: 1px dashed #a4a4a4;
62
            position: relative;
63

64
            .upload,
65
            .input-class-chen,
66
            .filename {
67
                position: absolute;
68
                inset: 0;
69
                margin: auto;
70
            }
71

72
            .upload {
73
                opacity: 1;
74
            }
75

76
            .filename {
77
                display: block;
78
                color: #676767;
79
                font-size: 14px;
80
                text-align: center;
81
                opacity: 0;
82
                display: flex;
83
                align-items: center;
84
                justify-content: center;
85
            }
86

87
            .input-class-chen {
88
                opacity: 0;
89
            }
90

91
            &.selected .upload {
92
                opacity: 0;
93
            }
94

95
            &.selected .filename {
96
                opacity: 1;
97
            }
98

99
            &.active {
100
                opacity: 0;
101
            }
102
        }
103
    }
104

105
    .syncing,
106
    .done {
107
        position: absolute;
108
        top: 109px;
109
        left: 134px;
110
        opacity: 0;
111
        pointer-events: none;
112
    }
113

114
    .syncing.active {
115
        animation: syncing 3.2s ease-in-out;
116
    }
117

118
    .done.active {
119
        animation: done 0.5s ease-in 3.2s;
120
        animation-fill-mode: both;
121
    }
122

123
    .upload-btn {
124
        border-radius: 3px;
125
        text-align: center;
126
        line-height: 40px;
127
        font-size: 14px;
128
        box-shadow: 0 2px 0 0 #498c25;
129
        cursor: pointer;
130
        width: 140px;
131
        height: 40px;
132
        background: #6ece3b;
133
        transition: all 0.2s ease-in-out;
134

135
        &:hover {
136
            box-shadow:
137
                0 2px 0 0 #498c25,
138
                0 2px 10px 0 #6ece3b;
139
        }
140
    }
141
}
142

143
@keyframes syncing {
144
    0% {
145
        transform: rotate(0);
146
    }
147
    10% {
148
        opacity: 1;
149
    }
150
    90% {
151
        opacity: 1;
152
    }
153
    100% {
154
        transform: rotate(360deg);
155
        opacity: 0;
156
    }
157
}
158

159
@keyframes done {
160
    from {
161
        opacity: 0;
162
    }
163
    to {
164
        opacity: 1;
165
    }
166
}

1
const input = document.querySelector(".input")
2
const filenameDiv = document.querySelector(".filename")
3
const contentDiv = document.querySelector(".content")
4
const uploadBtn = document.querySelector(".upload-btn")
5
const uploadImg = document.querySelector(".upload")
6
const bar = document.querySelector(".bar")
7
const syncDiv = document.querySelector(".syncing")
8
const doneDiv = document.querySelector(".done")
9
let isSelect = false
10
input.addEventListener("change", (e) => {
11
    const filename = e.target.files[0].name
12
    filenameDiv.textContent = filename
13
    contentDiv.classList.add("selected")
14
    isSelect = true
15
})
16
uploadBtn.addEventListener("click", () => {
17
    if (isSelect) {
18
        bar.classList.add("active")
19
        contentDiv.classList.add("active")
20
        syncDiv.classList.add("active")
21
        doneDiv.classList.add("active")
22
    }
23
})