如何解决如何将图像动画化到页面中心
我有一些头像图片,我想对其进行扩展并在单击时使其显示在中心。为此,我正在使用翻译和缩放:
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 举报,一经查实,本站将立刻删除。