All files / src/transition/_example TransitionExample.jsx

88.89% Statements 8/9
100% Branches 0/0
87.5% Functions 7/8
88.89% Lines 8/9

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>
  );
}