Skip to content

Commit 7683b25

Browse files
bplok20010bplok20010
committed
css动画调整
1 parent 6a3a378 commit 7683b25

11 files changed

+199
-233
lines changed

‎README.md

+90-107
Original file line numberDiff line numberDiff line change
@@ -94,154 +94,137 @@ export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopup
9494

9595
```css
9696
.rw-tooltip-root {
97-
position: absolute;
98-
left: 0;
99-
right: 0;
100-
top: 0;
97+
position: absolute;
98+
left: 0;
99+
right: 0;
100+
top: 0;
101101
}
102102

103103
.rw-tooltip {
104-
position: absolute;
105-
left: 0;
106-
top: 0;
107-
font-size: 14px;
108-
z-index: 2000;
104+
position: absolute;
105+
left: 0;
106+
top: 0;
107+
font-size: 14px;
108+
z-index: 2000;
109109
}
110110

111111
.rw-tooltip-mask {
112-
position: fixed;
113-
left: 0;
114-
top: 0;
115-
right: 0;
116-
bottom: 0;
117-
background: #000;
118-
opacity: 0.1;
119-
z-index: 2000;
112+
position: fixed;
113+
left: 0;
114+
top: 0;
115+
right: 0;
116+
bottom: 0;
117+
background: #000;
118+
opacity: 0.1;
119+
z-index: 2000;
120120
}
121121

122122
.rw-tooltip-inner {
123-
position: relative;
124-
min-width: 30px;
125-
min-height: 32px;
126-
padding: 6px 8px;
127-
color: #fff;
128-
text-align: left;
129-
text-decoration: none;
130-
word-wrap: break-word;
131-
background-color: rgba(0, 0, 0, 0.9);
132-
border-radius: 2px;
133-
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
134-
box-sizing: border-box;
123+
position: relative;
124+
min-width: 30px;
125+
min-height: 32px;
126+
padding: 6px 8px;
127+
color: #fff;
128+
text-align: left;
129+
text-decoration: none;
130+
word-wrap: break-word;
131+
background-color: rgba(0, 0, 0, 0.9);
132+
border-radius: 2px;
133+
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
134+
0 9px 28px 8px rgba(0, 0, 0, 0.05);
135+
box-sizing: border-box;
135136
}
136137

137138
.rw-tooltip-arrow {
138-
position: absolute;
139-
width: 0;
140-
height: 0;
141-
border-color: transparent;
142-
border-style: solid;
139+
position: absolute;
140+
width: 0;
141+
height: 0;
142+
border-color: transparent;
143+
border-style: solid;
143144

144-
box-sizing: border-box;
145+
box-sizing: border-box;
145146
}
146147

147-
.rw-tooltip-placement-top>.rw-tooltip-arrow,
148-
.rw-tooltip-placement-top-left>.rw-tooltip-arrow,
149-
.rw-tooltip-placement-top-right>.rw-tooltip-arrow {
150-
bottom: -5px;
151-
border-width: 5px 5px 0;
152-
border-top-color: rgba(0, 0, 0, 0.9);
148+
.rw-tooltip-placement-top > .rw-tooltip-arrow,
149+
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
150+
.rw-tooltip-placement-top-right > .rw-tooltip-arrow {
151+
bottom: -5px;
152+
border-width: 5px 5px 0;
153+
border-top-color: rgba(0, 0, 0, 0.9);
153154
}
154155

155-
.rw-tooltip-placement-bottom>.rw-tooltip-arrow,
156-
.rw-tooltip-placement-bottom-left>.rw-tooltip-arrow,
157-
.rw-tooltip-placement-bottom-right>.rw-tooltip-arrow {
158-
top: -5px;
159-
border-width: 0 5px 5px;
160-
border-bottom-color: rgba(0, 0, 0, 0.9);
156+
.rw-tooltip-placement-bottom > .rw-tooltip-arrow,
157+
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow,
158+
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
159+
top: -5px;
160+
border-width: 0 5px 5px;
161+
border-bottom-color: rgba(0, 0, 0, 0.9);
161162
}
162163

163-
.rw-tooltip-placement-left>.rw-tooltip-arrow,
164-
.rw-tooltip-placement-left-top>.rw-tooltip-arrow,
165-
.rw-tooltip-placement-left-bottom>.rw-tooltip-arrow {
166-
right: -5px;
167-
border-width: 5px 0 5px 5px;
168-
border-left-color: rgba(0, 0, 0, 0.9);
164+
.rw-tooltip-placement-left > .rw-tooltip-arrow,
165+
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
166+
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow {
167+
right: -5px;
168+
border-width: 5px 0 5px 5px;
169+
border-left-color: rgba(0, 0, 0, 0.9);
169170
}
170171

171-
.rw-tooltip-placement-right>.rw-tooltip-arrow,
172-
.rw-tooltip-placement-right-top>.rw-tooltip-arrow,
173-
.rw-tooltip-placement-right-bottom>.rw-tooltip-arrow {
174-
left: -5px;
175-
border-width: 5px 5px 5px 0;
176-
border-right-color: rgba(0, 0, 0, 0.9);
172+
.rw-tooltip-placement-right > .rw-tooltip-arrow,
173+
.rw-tooltip-placement-right-top > .rw-tooltip-arrow,
174+
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
175+
left: -5px;
176+
border-width: 5px 5px 5px 0;
177+
border-right-color: rgba(0, 0, 0, 0.9);
177178
}
178179

179-
.rw-tooltip-placement-top-left>.rw-tooltip-arrow,
180-
.rw-tooltip-placement-bottom-left>.rw-tooltip-arrow {
181-
left: 16px;
180+
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
181+
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow {
182+
left: 16px;
182183
}
183184

184-
.rw-tooltip-placement-top>.rw-tooltip-arrow,
185-
.rw-tooltip-placement-bottom>.rw-tooltip-arrow {
186-
left: 50%;
187-
margin-left: -5px;
185+
.rw-tooltip-placement-top > .rw-tooltip-arrow,
186+
.rw-tooltip-placement-bottom > .rw-tooltip-arrow {
187+
left: 50%;
188+
margin-left: -5px;
188189
}
189190

190-
.rw-tooltip-placement-top-right>.rw-tooltip-arrow,
191-
.rw-tooltip-placement-bottom-right>.rw-tooltip-arrow {
192-
right: 16px;
191+
.rw-tooltip-placement-top-right > .rw-tooltip-arrow,
192+
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
193+
right: 16px;
193194
}
194195

195-
.rw-tooltip-placement-left-top>.rw-tooltip-arrow,
196-
.rw-tooltip-placement-right-top>.rw-tooltip-arrow {
197-
top: 8px;
196+
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
197+
.rw-tooltip-placement-right-top > .rw-tooltip-arrow {
198+
top: 8px;
198199
}
199200

200-
.rw-tooltip-placement-left>.rw-tooltip-arrow,
201-
.rw-tooltip-placement-right>.rw-tooltip-arrow {
202-
top: 50%;
203-
margin-top: -5px;
201+
.rw-tooltip-placement-left > .rw-tooltip-arrow,
202+
.rw-tooltip-placement-right > .rw-tooltip-arrow {
203+
top: 50%;
204+
margin-top: -5px;
204205
}
205206

206-
.rw-tooltip-placement-left-bottom>.rw-tooltip-arrow,
207-
.rw-tooltip-placement-right-bottom>.rw-tooltip-arrow {
208-
bottom: 8px;
207+
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow,
208+
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
209+
bottom: 8px;
209210
}
210211

211-
.rw-tooltip-animated {
212-
animation-duration: 0.2s;
212+
.rw-tooltip-enter {
213+
opacity: 0;
213214
}
214215

215-
.rw-tooltip-fade-in {
216-
animation-name: TooltipFadeIn;
216+
.rw-tooltip-enter-active {
217+
opacity: 1;
218+
transition: opacity 200ms;
217219
}
218220

219-
.rw-tooltip-fade-out {
220-
animation-name: TooltipFadeOut;
221+
.rw-tooltip-exit {
222+
opacity: 1;
221223
}
222224

223-
.rw-tooltip-exit-done {
224-
opacity: 0;
225-
}
226-
227-
@keyframes TooltipFadeIn {
228-
from {
229-
opacity: 0;
230-
}
231-
232-
to {
233-
opacity: 1;
234-
}
235-
}
236-
237-
@keyframes TooltipFadeOut {
238-
from {
239-
opacity: 1;
240-
}
241-
242-
to {
243-
opacity: 0;
244-
}
225+
.rw-tooltip-exit-active {
226+
opacity: 0;
227+
transition: opacity 200ms;
245228
}
246229

247230
```

‎docs/asset-manifest.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"index.css": "static/css/index.79eefb4a.chunk.css",
3-
"index.js": "static/js/index.79eefb4a.chunk.js",
2+
"index.css": "static/css/index.0f4d9541.chunk.css",
3+
"index.js": "static/js/index.0f4d9541.chunk.js",
44
"runtime-index.js": "static/js/runtime-index.92eae014.js",
5-
"static/js/2.91961bd0.chunk.js": "static/js/2.91961bd0.chunk.js",
5+
"static/js/2.b694e620.chunk.js": "static/js/2.b694e620.chunk.js",
66
"index.html": "index.html"
77
}

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.79eefb4a.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.91961bd0.chunk.js"></script><script src="static/js/index.79eefb4a.chunk.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.0f4d9541.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.b694e620.chunk.js"></script><script src="static/js/index.0f4d9541.chunk.js"></script></body></html>

‎docs/static/css/index.79eefb4a.chunk.css renamed to ‎docs/static/css/index.0f4d9541.chunk.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/2.91961bd0.chunk.js renamed to ‎docs/static/js/2.b694e620.chunk.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)