Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 1x 1x 1x 1x 4x 4x 4x | import React, { useState } from "react"; import { Row, Col } from "@tencent/tea-component/lib/grid"; import { Switch } from "@tencent/tea-component/lib/switch"; import { FadeTransition, SlideTransition, ScaleTransition, CollapseTransition, } from "@tencent/tea-component/lib/transition"; export default function TransitionExample() { return ( <Row> <TransitionCase title="淡入淡出 (Fade)"> {visible => ( <FadeTransition in={visible}> <TeaPot /> </FadeTransition> )} </TransitionCase> <TransitionCase title="滑动 (Slide)"> {visible => ( <SlideTransition in={visible}> <TeaPot /> </SlideTransition> )} </TransitionCase> <TransitionCase title="缩放 (Scale)"> {visible => ( <ScaleTransition in={visible}> <TeaPot /> </ScaleTransition> )} </TransitionCase> <TransitionCase title="折叠 (Collapase)"> {visible => ( <CollapseTransition in={visible} height={150}> <TeaPot /> </CollapseTransition> )} </TransitionCase> </Row> ); } function TransitionCase({ title, children }) { const [visible, setVisible] = useState(true); return ( <Col style={{ textAlign: "center" }}> <p> <Switch value={visible} onChange={visible => setVisible(visible)}> {title} </Switch> </p> {children(visible)} </Col> ); } /** * 茶壶 */ function TeaPot() { return ( <div style={{ display: "inline-block" }}> <svg version="1.1" x="0px" y="0px" viewBox="0 0 56 56" style={{ width: 150, height: 150 }} > <g fill="#006eff"> <path d="M6.553,30.003c-1.6-2.5-3.2-6.3-2.4-9c0.4-1.3,1.5-2.2,2.7-2.2c0.6,0,1.3,0.2,1.9,0.7c0.6,0.5,1.1,1.2,1.5,1.9c0.2,0.3,0.4,0.6,0.6,0.8c1-1.6,2.3-3,3.9-4.3c-0.9-0.3-1.9-0.7-3-1.4c-1.7-1.1-3.8-1.8-5.7-1.8c-1.6,0-4.6,0.5-5.7,4.1c-1,3.1,0.1,9.4,3.6,14.1c1.2,1.6,3,3.5,5.5,4.5c-0.9-1.7-1.5-3.6-1.6-5.7C7.353,31.203,6.953,30.603,6.553,30.003z" /> <path d="M29.053,46.103c-4.8,0-9.7-1-13.6-3c-0.3,0.4-0.4,0.7-0.4,1.1c0,2.6,7,4,13.9,4s13.9-1.4,13.9-4c0-0.3-0.1-0.7-0.4-1C38.753,45.103,33.853,46.103,29.053,46.103z" /> <path d="M29.353,7.903c-1.7,0-3.1,0.7-3.1,2.8h6.1C32.453,8.603,31.053,7.903,29.353,7.903z" /> <path d="M55.553,15.403c-1.2-0.2-3.4-0.4-4.7,0.1c-1.8,0.7-2.6,2.2-3.6,3.4c-0.8,1-0.9,0.8-3.4,0.8c-1.3-1.3-2.8-2.5-4.4-3.4c1.7-0.5,2.7-1.1,2.7-1.8c0-1.6-5.7-2.9-12.7-2.9s-12.7,1.3-12.7,2.9c0,0.6,0.9,1.2,2.5,1.7l0,0c4.2,1.2,10.6,0.9,10.6,0.9s-3,1.9-13.8,1.1c-4.2,3.2-7.1,7.8-7.1,13c-0.1,9.5,10.1,13.8,20.1,13.8c10.1,0,20.2-4.3,20.2-13.8c0-1.2-0.2-2.3-0.4-3.4c0.5-0.4,0.8-1.1,0.8-1.1c0.4-0.7,2.1-7,3.9-9c0.6-0.7,1.3-1.1,1.9-1.4C56.253,15.803,56.353,15.503,55.553,15.403z" /> </g> </svg> </div> ); } |