1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 " />
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
8+ < title > react-transition-group 离开动画</ title >
9+ < style > </ style >
10+ < script crossorigin src ="https://g.alicdn.com/code/lib/react/18.2.0/umd/react.production.min.js "> </ script >
11+ < script crossorigin src ="https://g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.production.min.js "> </ script >
12+ < script crossorigin
13+ src ="https://g.alicdn.com/code/lib/react-transition-group/4.4.5/react-transition-group.min.js "> </ script >
14+ < script crossorigin src ="https://gw.alipayobjects.com/os/lib/babel/standalone/7.18.8/babel.min.js "> </ script >
15+ < style >
16+ .drawer {
17+ position : absolute;
18+ left : 0 ;
19+ top : 0 ;
20+ width : 50% ;
21+ bottom : 0 ;
22+ background : # fff
23+ box-shadow : 0 0 6px 0px # 000
24+ text-align : center;
25+ }
26+
27+ /* 从透明到不透明 & 左侧移动过来 */
28+ @keyframes entrying {
29+ 0% {
30+ transform : translate3d (-100% , 0px , 0px );
31+ }
32+
33+ 100% {
34+ transform : none;
35+ }
36+ }
37+
38+ /* 从不透明到透明 & 右侧移动出来 */
39+ @keyframes leaving {
40+ 100% {
41+ transform : translate3d (-100% , 0px , 0px );
42+ }
43+
44+ 0% {
45+ transform : none;
46+ }
47+ }
48+
49+ .entering {
50+ animation : 1s entrying;
51+ }
52+
53+ .exiting {
54+ animation : 1s leaving;
55+ }
56+ </ style >
57+ </ head >
58+
59+ < body >
60+ < div id ="app "> </ div >
61+ < script type ="text/babel " data-type ="module ">
62+ const { Transition } = ReactTransitionGroup
63+
64+ function App ( ) {
65+ const [ showDrawer , setShowDrawer ] = React . useState ( false ) ;
66+ const nodeRef = React . useRef ( ) ;
67+
68+ return < div >
69+ < h1 > react-transition-group 实现</ h1 >
70+ < button onClick = { ( ) => {
71+ setShowDrawer ( true ) ;
72+ } } > 打开抽屉 </ button >
73+ < Transition nodeRef = { nodeRef } in = { showDrawer } timeout = { 1000 } unmountOnExit >
74+ { state => < div ref = { nodeRef } className = { "drawer " + state } >
75+ < h3 > 抽屉有离开动画</ h3 >
76+ < button onClick = { ( ) => {
77+ setShowDrawer ( false ) ;
78+ } } > 关闭抽屉</ button >
79+ </ div > }
80+ </ Transition >
81+ </ div >
82+ }
83+
84+ ReactDOM . render (
85+ < App /> ,
86+ document . getElementById ( "app" )
87+ ) ;
88+ </ script >
89+ </ body >
90+
91+ </ html >
0 commit comments