Transformacja lub skala CSS? Animuj na Górze

Question 1

Próbuję płynnie zamontować komponent między dwoma komponentami. W takim przypadku wyświetli się natychmiast.

Jak mogę to zrobić, aby powoli się zwiększał i skalował wysokość do proponowanej wysokości, a nie tylko się pojawiał?

Mam tutaj demo:

Edit lucid-star-fs6zi

javascript css reactjs css-animations css-transitions

-1

Freddy. 19 grudzień 2019, 20:52

Ze względu na sposób, w jaki React ponownie renderuje elementy DOM, będziesz musiał użyć specjalnej biblioteki, aby przejścia CSS działały z nią poprawnie. Jeśli wyszukujesz w Google „Reaguj przejścia”, możesz znaleźć wiele i wybrać ten, który najbardziej Ci się podoba.

–

IceMetalPunk

19 grudzień 2019, 21:01

Jeśli nie masz nic przeciwko temu, że jest trochę dziwaczny, możesz użyć animacji i przejść (i zamiast montowania i odłączania ustawisz wyświetlacz na none i inline).

–

Miroslav Glamuzina

19 grudzień 2019, 21:04

Answer

Jak @IceMetalPunk we wspomnianych już komentarzach, musisz do tego użyć bibliotek. Na przykład react-transition-group pasuje do Twoich potrzeb.

Dostosowałem twoją piaskownicę: https://codesandbox.io/s/empty-tdd-7rvs8

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Card } from "antd";
import { Transition } from "react-transition-group";
const CardExample = () => {
  const [showDiv, setShowDiv] = useState(false);

  const handleClick = () => {
    setShowDiv(!showDiv);
  };

  const cardStyle = {
    transition: `all 300ms ease-in-out`,
    background: "red"
  };

  const transitionStyles = {
    entering: { height: 150 },
    entered: { height: 150 },
    exiting: { height: 0 },
    exited: { height: 0 }
  };
  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card>ITEM</Card>
      <Transition in={showDiv} timeout={300}>
        {state => (
          <Card
            style={{
              ...cardStyle,
              ...transitionStyles[state]
            }}
          >
            This is my card
          </Card>
        )}
      </Transition>
      <Card>ITEM</Card>
    </div>
  );
};

ReactDOM.render(
  <div>
    <CardExample />
  </div>,
  document.getElementById("container")
);

źródło: https://reactcommunity.org/react-transition-group /przejście

1

oemera 19 grudzień 2019, 22:41

Question 2

Jak @IceMetalPunk we wspomnianych już komentarzach, musisz do tego użyć bibliotek. Na przykład react-transition-group pasuje do Twoich potrzeb.

Dostosowałem twoją piaskownicę: https://codesandbox.io/s/empty-tdd-7rvs8

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Card } from "antd";
import { Transition } from "react-transition-group";
const CardExample = () => {
  const [showDiv, setShowDiv] = useState(false);

  const handleClick = () => {
    setShowDiv(!showDiv);
  };

  const cardStyle = {
    transition: `all 300ms ease-in-out`,
    background: "red"
  };

  const transitionStyles = {
    entering: { height: 150 },
    entered: { height: 150 },
    exiting: { height: 0 },
    exited: { height: 0 }
  };
  return (
    <div>
      <Button onClick={handleClick} type="primary">
        Show Card
      </Button>
      <Card>ITEM</Card>
      <Transition in={showDiv} timeout={300}>
        {state => (
          <Card
            style={{
              ...cardStyle,
              ...transitionStyles[state]
            }}
          >
            This is my card
          </Card>
        )}
      </Transition>
      <Card>ITEM</Card>
    </div>
  );
};

ReactDOM.render(
  <div>
    <CardExample />
  </div>,
  document.getElementById("container")
);

źródło: https://reactcommunity.org/react-transition-group /przejście

1

oemera 19 grudzień 2019, 22:41

Transformacja lub skala CSS? Animuj na Górze

1 odpowiedź

Podobne pytania

Nowe pytania