如何将图像动画化到页面中心

问题描述

我有一些头像图片，我想对其进行扩展并在单击时使其显示在中心。为此，我正在使用翻译和缩放：

import React,{ useEffect,useRef,useState } from "react"
import { Transition } from "react-transition-group"

function UserItem({ firstName,lastName,email,avatar,isInGrid }) {
  const [isAvatarModalOpen,setIsAvatarModalOpen] = useState(false)
  const avatarEl = useRef(null)
  const animationRef = useRef({})

  useEffect(() => {
    const { x,y,width } = avatarEl.current.getBoundingClientRect()
    const toDimensions = Math.min(window.innerWidth,window.innerHeight,350)
    const translateX = window.innerWidth / 2 - toDimensions / 2 - x
    const translateY = window.innerHeight / 2 - toDimensions / 2 - y
    const scale = toDimensions / width
    animationRef.current = { translateX,translateY,scale }
  },[])

  const handleAvatarClick = () => {
    setIsAvatarModalOpen(!isAvatarModalOpen)
  }

  const transitionStyles = {
    entering: {
      transform: `scale(${animationRef.current.scale}) translate(${animationRef.current.translateX}px,${animationRef.current.translateY}px)`,},entered: {
      transform: `scale(${animationRef.current.scale}) translate(${animationRef.current.translateX}px,exiting: { transform: "translate(0,0) scale(1)" },exited: { transform: "translate(0,}

  return (
    <Transition in={isAvatarModalOpen} timeout={300}>
      {state => {
        return (
          <img
            style={{
              transition: "transform 300ms",...transitionStyles[state],}}
            onClick={handleAvatarClick}
            ref={avatarEl}
            src={avatar}
          />
        )
      }}
    </Transition>
  )
}

export default UserItem

这是发生在ATM上的情况：

那我想念什么？我的计算不对吗？

这里是sandbox

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）