<div id="app">
  
</div>              

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #05f, #09f);
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useAnimationControls} from "https://esm.sh/framer-motion@8.3.3";



const App = function() {
  
  
  const [leftState,setLeftState] = useState(false)
                                     
                                            
                                            
  return (
    <div style={{
        display:'flex',

        justifyContent:'center',
        alignItems:'center',
        gap:100
      }}>
      <div 
        style={{
          display:'flex',
          flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
          gap:22,
            fontFamily:'system-ui',
              color:'white',
                letterSpacing:2
        }}
        >
           <motion.div
        layout
        style={{
          width:leftState ? 200 : 100,
          height:leftState ? 200 : 100,
          backgroundColor:'#FFFFFF',
          borderRadius:'60px',
          display:'flex',
          alignItems:'center', 
          justifyContent: 'center',
          padding:10
        }}
        onTap={()=>{
          setLeftState(!leftState)
        }}
    
        >

          <motion.div
            layout
              style={{
              width:30,
              height:30,
              backgroundColor:'black',
              borderRadius:60,
            }}
            >


          </motion.div>
        </motion.div>
        <motion.span layout>黑点和文字都设置了layout</motion.span>
      </div>
  <div 
        style={{
          display:'flex',
          flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
          gap:22,
            fontFamily:'system-ui',
              color:'white'
        }}
        >
           <motion.div
        layout
        style={{
          width:leftState ? 200 : 100,
          height:leftState ? 200 : 100,
          backgroundColor:'#FFFFFF',
          borderRadius:'60px',
          display:'flex',
          alignItems:'center', 
          justifyContent: 'center',
          padding:10
        }}
        onTap={()=>{
          setLeftState(!leftState)
        }}
    
        >

          <motion.div

              style={{
              width:30,
              height:30,
              backgroundColor:'black',
              borderRadius:60,
            }}
            >


          </motion.div>
        </motion.div>
        <motion.span >黑点和文字都未设置layout</motion.span>
      </div>
      
      
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)