<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, #7b2ff7, #f107a3);
}

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 btnStyle = {
  color:'white',
  fontFamily:'system-ui',
  backgroundColor:'black',
  padding:10,
  paddingLeft:32,
   paddingRight:32,
  letterSpacing:1,
  borderRadius:20,
  cursor:'pointer',
  whiteSpace:'nowrap'
}

const App = function() {
  
  const [buttonRight,setButtonState] = useState(false)
  
  return (
    <div style={{
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        gap:30,
        fontFamily:'system-ui',
          fontSize:16
      }}>
      <motion.div
        
        style={{
          width:buttonRight ? 160 :200,
          height:40,
          backgroundColor:'#FFFFFF',
          borderRadius:'60px',
          display:'flex',
          alignItems:'center', 
          justifyContent: 'center',
          padding:10,
                
        }}
    
        layout
        onTap={()=>{
          setButtonState(!buttonRight)
        }}
    
      >
    </motion.div>
  
      <motion.div
        
        style={{
          width:120,
          height:40,
          backgroundColor:'#FFFFFF',
          borderRadius:'60px',
          display:'flex',
          alignItems:'center', 
          justifyContent: 'center',
          padding:10,
            // 跟位置相关的参数，而不是x 即transform相关的参数
            left:buttonRight ? 100 :0,
              position:'relative'
        }}
        
        layout
        onTap={()=>{
          setButtonState(!buttonRight)
        }}
    
      >

    </motion.div>
      <span
        style={{
          color:'white',
           opacity:0.6
        }}
        >点击任意一个</span>
    </div>

  )
}

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