React-Spring：让你的应用栩栩如生

import { animated } from '@react-spring/web'

// ✅ 正常工作


// ❌由于mesh不是动画元素，所以这不会工作

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {

  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    
  )
}

import { useSpring, animated } from '@react-spring/web'

export default function MyComponent() {
  
  const [springs, api] = useSpring(() => ({
    from: { x: 0 },
  }))
  
  const handleClick = () => {
    api.start({
      from: {
        x: 0,
      },
      to: {
        x: 100,
      },
    })
  }
  
  return (
    
  )
}

import { useSprings, animated } from '@react-spring/web'

export default function MyComponent() {

  const springs = useSprings(12, {
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return (
    

      {springs.map(props => (
        Hello World
      ))}
    
  )
}

import { useTrail, animated } from '@react-spring/web'

export default function MyComponent() {

  const trails = useTrail(12, {
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return (
    

      {trails.map(props => (
        Hello World
      ))}
    
  )
}

import { useState, useRef } from 'react'
import { Controller, animated } from '@react-spring/web'

function AnimatedComponent() {
  const [isShowing, setIsShowing] = useState(false)
  const animations = useRef(new Controller({ opacity: 0 }))

  const toggle = () => {
    animations.current.start({ opacity: isShowing ? 1 : 0 })
    setIsShowing(!isShowing)
  }

  return (
    <>
      click
      I will fade
    
  )
}

import { useResize, animated } from '@react-spring/web'

function MyComponent() {
  const { width, height } = useResize()
  return Hello World
}

import { useInView, animated } from '@react-spring/web'

function MyComponent() {
  const [ref, inView] = useInView()
  return {inView ? 'Hello World' : null}
}