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

如何正确地制作动画呢？我想过Transform:Scale，但没有奏效。

下面是代码和一个沙箱:

null

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

null

https://codesandbox.io/s/stilt-Smoke-5ikkg？file=/src/app.js

谢啦！