如何根据其内容为父宽度设置动画？

Question

我有一个模式，它的内容可以在两个不同的组件之间切换。它可以工作，但是过渡很残酷，因为包装器会立即占用其内容的宽度。

如何正确设置动画？我考虑过 transform:scale 但它不起作用。

这里是代码，还有一个沙箱：

import React, {useState} from "react";
import styled from "styled-components"

const Wrapper = styled.div`
background:gainsboro;
width:100%;
height:100%;
border:1px solid lightgrey;
`

const Content1 = () => (
  <div>
    Lorizzle ipsizzle dolor sit amet, ass adipiscing elizzle. Ass 
    izzle velizzle, volutpizzle, suscipit quizzle, we gonna chung 
    vizzle, arcu. Pellentesque egizzle boom shackalack. Fo shizzle 
    my nizzle erizzle. Pimpin' crunk dolor dapibus rizzle tempizzle

    sizzle. Maurizzle fo shizzle mah nizzle fo rizzle, mah home 
    g-dizzle nibh daahng dawg go to hizzle. Shizznit izzle tortor.
     Pellentesque sizzle rhoncizzle shizzlin dizzle. In hizzle 
     habitasse platea dictumst. For sure fo. Break it down izzle 

     urna, pretizzle eu, mattis go to hizzle, eleifend black, nunc.
      Daahng dawg suscipit. Tellivizzle yo mamma velit sed check 
      out this.
    </div>
)

const Content2 = () => (
  <div>
    very short content
    </div>
)

export default function App() {
  const [toggle, setToggle] = useState(false)
  return (
    <Wrapper>
     {toggle ? <Content1 /> : <Content2/>}
     <button onClick={()=> setToggle(!toggle)}>toggle content</button>
    </Wrapper>
  );
}

https://codesandbox.io/s/still-smoke-5ikkg?file=/src/App.js

谢谢！

Answer 1

你可以使用 react-fade-in，不是最好的，而是一个快速的解决方案

https://www.npmjs.com/package/react-fade-in