Skip to content

Commit 1b23f98

Browse files
bplok20010bplok20010
committed
动画效果调整
1 parent 1ae020d commit 1b23f98

9 files changed

+94
-99
lines changed

‎README.md

+33-42
Original file line numberDiff line numberDiff line change
@@ -83,20 +83,6 @@ export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopup
8383
delay: 100,
8484
trigger: ["hover"],
8585
outsideHideEventName: ["mousedown", "click"],
86-
transition: {
87-
classNames: {
88-
appear: "tooltip-animated",
89-
appearActive: "tooltip-fade-in",
90-
appearDone: "",
91-
enter: "tooltip-animated",
92-
enterActive: "tooltip-fade-in",
93-
enterDone: "",
94-
exit: "tooltip-animated",
95-
exitActive: "tooltip-fade-out",
96-
exitDone: "",
97-
},
98-
timeout: 300,
99-
},
10086
}
10187
```
10288

@@ -154,82 +140,86 @@ export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopup
154140
box-sizing: border-box;
155141
}
156142

157-
.rw-tooltip-placement-top > .rw-tooltip-arrow,
158-
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
159-
.rw-tooltip-placement-top-right > .rw-tooltip-arrow {
143+
.rw-tooltip-placement-top>.rw-tooltip-arrow,
144+
.rw-tooltip-placement-top-left>.rw-tooltip-arrow,
145+
.rw-tooltip-placement-top-right>.rw-tooltip-arrow {
160146
bottom: -5px;
161147
border-width: 5px 5px 0;
162148
border-top-color: rgba(0, 0, 0, 0.9);
163149
}
164150

165-
.rw-tooltip-placement-bottom > .rw-tooltip-arrow,
166-
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow,
167-
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
151+
.rw-tooltip-placement-bottom>.rw-tooltip-arrow,
152+
.rw-tooltip-placement-bottom-left>.rw-tooltip-arrow,
153+
.rw-tooltip-placement-bottom-right>.rw-tooltip-arrow {
168154
top: -5px;
169155
border-width: 0 5px 5px;
170156
border-bottom-color: rgba(0, 0, 0, 0.9);
171157
}
172158

173-
.rw-tooltip-placement-left > .rw-tooltip-arrow,
174-
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
175-
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow {
159+
.rw-tooltip-placement-left>.rw-tooltip-arrow,
160+
.rw-tooltip-placement-left-top>.rw-tooltip-arrow,
161+
.rw-tooltip-placement-left-bottom>.rw-tooltip-arrow {
176162
right: -5px;
177163
border-width: 5px 0 5px 5px;
178164
border-left-color: rgba(0, 0, 0, 0.9);
179165
}
180166

181-
.rw-tooltip-placement-right > .rw-tooltip-arrow,
182-
.rw-tooltip-placement-right-top > .rw-tooltip-arrow,
183-
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
167+
.rw-tooltip-placement-right>.rw-tooltip-arrow,
168+
.rw-tooltip-placement-right-top>.rw-tooltip-arrow,
169+
.rw-tooltip-placement-right-bottom>.rw-tooltip-arrow {
184170
left: -5px;
185171
border-width: 5px 5px 5px 0;
186172
border-right-color: rgba(0, 0, 0, 0.9);
187173
}
188174

189-
.rw-tooltip-placement-top-left > .rw-tooltip-arrow,
190-
.rw-tooltip-placement-bottom-left > .rw-tooltip-arrow {
175+
.rw-tooltip-placement-top-left>.rw-tooltip-arrow,
176+
.rw-tooltip-placement-bottom-left>.rw-tooltip-arrow {
191177
left: 16px;
192178
}
193179

194-
.rw-tooltip-placement-top > .rw-tooltip-arrow,
195-
.rw-tooltip-placement-bottom > .rw-tooltip-arrow {
180+
.rw-tooltip-placement-top>.rw-tooltip-arrow,
181+
.rw-tooltip-placement-bottom>.rw-tooltip-arrow {
196182
left: 50%;
197183
margin-left: -5px;
198184
}
199185

200-
.rw-tooltip-placement-top-right > .rw-tooltip-arrow,
201-
.rw-tooltip-placement-bottom-right > .rw-tooltip-arrow {
186+
.rw-tooltip-placement-top-right>.rw-tooltip-arrow,
187+
.rw-tooltip-placement-bottom-right>.rw-tooltip-arrow {
202188
right: 16px;
203189
}
204190

205-
.rw-tooltip-placement-left-top > .rw-tooltip-arrow,
206-
.rw-tooltip-placement-right-top > .rw-tooltip-arrow {
191+
.rw-tooltip-placement-left-top>.rw-tooltip-arrow,
192+
.rw-tooltip-placement-right-top>.rw-tooltip-arrow {
207193
top: 8px;
208194
}
209195

210-
.rw-tooltip-placement-left > .rw-tooltip-arrow,
211-
.rw-tooltip-placement-right > .rw-tooltip-arrow {
196+
.rw-tooltip-placement-left>.rw-tooltip-arrow,
197+
.rw-tooltip-placement-right>.rw-tooltip-arrow {
212198
top: 50%;
213199
margin-top: -5px;
214200
}
215201

216-
.rw-tooltip-placement-left-bottom > .rw-tooltip-arrow,
217-
.rw-tooltip-placement-right-bottom > .rw-tooltip-arrow {
202+
.rw-tooltip-placement-left-bottom>.rw-tooltip-arrow,
203+
.rw-tooltip-placement-right-bottom>.rw-tooltip-arrow {
218204
bottom: 8px;
219205
}
220206

221-
.tooltip-animated {
222-
animation-duration: 0.3s;
207+
.rw-tooltip-animated {
208+
animation-duration: 0.2s;
223209
}
224210

225-
.tooltip-fade-in {
211+
.rw-tooltip-fade-in {
226212
animation-name: TooltipFadeIn;
227213
}
228214

229-
.tooltip-fade-out {
215+
.rw-tooltip-fade-out {
230216
animation-name: TooltipFadeOut;
231217
}
232218

219+
.rw-tooltip-exit-done {
220+
opacity: 0;
221+
}
222+
233223
@keyframes TooltipFadeIn {
234224
from {
235225
opacity: 0;
@@ -239,6 +229,7 @@ export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopup
239229
opacity: 1;
240230
}
241231
}
232+
242233
@keyframes TooltipFadeOut {
243234
from {
244235
opacity: 1;

‎docs/asset-manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"index.css": "static/css/index.4ca12b27.chunk.css",
3-
"index.js": "static/js/index.4ca12b27.chunk.js",
2+
"index.css": "static/css/index.fa4784b4.chunk.css",
3+
"index.js": "static/js/index.fa4784b4.chunk.js",
44
"runtime-index.js": "static/js/runtime-index.92eae014.js",
55
"static/js/2.b694e620.chunk.js": "static/js/2.b694e620.chunk.js",
66
"index.html": "index.html"

‎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.4ca12b27.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.4ca12b27.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.fa4784b4.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.fa4784b4.chunk.js"></script></body></html>

‎docs/static/css/index.4ca12b27.chunk.css renamed to ‎docs/static/css/index.fa4784b4.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/index.4ca12b27.chunk.js

-1
This file was deleted.

0 commit comments

Comments
 (0)