我在react网页的菜单按钮动画中设置旋转轴时遇到问题.

我的菜单的概念是在点击按钮后旋转按钮.

[旋转前的菜单按钮][1]

[旋转后菜单按钮向右移动][2]

正如您在图[2]中看到的,中间菜单按钮移到了右侧,并且没有与其他按钮对齐,我希望它与所有按钮完美对齐.

我的导航项目.js描述了这些按钮:

import React, { useState } from "react";
import { TransitionGroup } from "react-transition-group";
import classes from "./NavigationItems.module.scss";
import NavigationItem from "./NavigationItem/NavigationItem"

const data = [
    {in:false, id:0, desc:"About me",href:"/photo-gallery/info"},
    {in:false, id:1, desc:"Photo gallery",href:"/photo-gallery/photos"},
    {in:false, id:2, desc:"Some tests",href:"/photo-gallery/education"}
];

const NavigationItems = () => {

    const [allButtons, setAllButtons] = useState(data);
    const [prevButton, setPrevButton] = useState({
        in:false, id:-1, desc:"",href:""
    });

    const allButtonsDeepUpdate = (idx, obj, updatePrevButton) => {
        const allButtonsCpy = [];
        for(let i=0;i<allButtons.length;i++) {
            if(i===idx) {
                allButtonsCpy.push(Object.assign({},obj));
            } else if (updatePrevButton && i===prevButton.id) {
                allButtonsCpy.push(Object.assign({},prevButton));
            } else {
                allButtonsCpy.push(Object.assign({},allButtons[i]));
            };
        };
        setAllButtons(allButtonsCpy);
     };

    const enterAnimation = (idx) => {

        if(allButtons[idx].id !== prevButton.id) {
            const newButton = {...allButtons[idx], ...{in:true}};
            if (prevButton.id !== -1)
                setPrevButton({...prevButton,...{in:false}});
            console.log("newButton:",newButton) ;
            console.log("prevButton:",prevButton);
            allButtonsDeepUpdate(idx, newButton, prevButton.id>=0 ? true : false)
            setPrevButton(Object.assign({},allButtons[idx]));
        }
    };

    return ( 
            <div>   
            <TransitionGroup component="ul" className={classes.NavigationItems}>
                {allButtons.map((button) => (
                    <NavigationItem
                        starter={button.in}
                        pkey={button.id}
                        timeout={1000}
                        click={enterAnimation.bind(this,button.id)}
                        link={button.href}
                    >
                        {button.desc}
                    </NavigationItem>
                ))}
            </TransitionGroup>
            </div>
    );
};
 
export default NavigationItems;

NavigationItems的共同响应scss类(NavigationItems.module.scss).js看起来像这样:

    @import '../../../sass/abstracts/variables.scss';
    
    .NavigationItems {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
        //flex-flow: column;
        //flex-direction: column;
        //justify-content: center;
        height: 100%;
    }
    
    @media (min-width: $min-width-small-res) {
        .NavigationItems {
            flex-flow: row;
            flex-direction: row;
            justify-content: space-evenly;
        }
    }

请注意,当我将样式切换到flexbox时,旋转轴也没有正确居中.

    import React from 'react';
    import { NavLink } from 'react-router-dom';
    import { CSSTransition } from 'react-transition-group';
    import classes from './NavigationItem.module.scss';
     
    const NavigationItem = (props) => {
        const nodeRef = React.createRef();
    
        return (
            <CSSTransition
                key={props.pkey}
                nodeRef={nodeRef}
                in={props.starter}
                classNames={{
                    enter: classes.NavigationItemEnter,
                    enterActive: classes.NavigationItemEnterActive,
                    enterDone: classes.NavigationItemEnterDone,
                    exit: classes.NavigationItemExit,
                    exitActive: classes.NavigationItemExitActive,
                    exitDone: classes.NavigationItemExitDone,
                }}
                timeout={props.timeout}
            >
                <li ref={nodeRef} className={classes.NavigationItem} onClick={props.click}>
    
                    <NavLink
                        // activeClassName={classes.active} // react-router-dom v.5
                        //className={({isActive}) => isActive ? classes.active : ''} // v.6
                        to={props.link}
                        exact={props.exact}
                    >
                        {props.children}
                    </NavLink>
                </li>
            </CSSTransition>
        );
    }
     
    export default NavigationItem;

这个项目(导航类)看起来像:

@import '../../../../sass/abstracts/variables.scss';

.NavigationItem {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    //backface-visibility: hidden;
    transform-origin: center center 0;

    &Enter {
        transform: rotate(0deg);
    }

    &EnterActive {
        transform: rotate(180deg);
        transition: transform 500ms linear
    }

    &EnterDone {
        transform: rotate(180deg);
    }

    &Exit {
        transform: rotate(180deg);
    }

    &ExitActive {
        transform: rotate(0deg);
        transition: transform 500ms linear;
    }

    &ExitDone {
        transform: rotate(0deg);
    }

    & a {
        border-radius: 15%;
        margin-right: 15px;
        background-color: $color-secondary-light;
        color: $color-primary;
        text-decoration: none;
        width: 100%;
        //box-sizing: border-box;
        display: block;
    }

    & a:hover {
        color: $color-alert;
    }

    & a:active,
    & a.active {
        color: $color-quaduprary;
        background-color: $color-secondary-dark;
    }
}

@media (min-width: $min-width-small-res) {
    .NavigationItem {
        margin: 0;
        left: 0;
        display: flex;
        height: 100%;
        width: auto;
        align-items: center;

        & a {
            color: $color-tertiary;
            height: 100%;
            padding: 10px 10px;
        }

        & a:active,
        & a.active {
            background-color: $color-secondary-dark;
            color: $color-quaduprary;
            border-color: $color-alert;
        }
    }
}

最后的文件是软件包.json和变量.scss:

$color-primary: #845EC2;

$color-secondary-light: #FF6F91;
$color-secondary-dark: #D65DB1;

$color-tertiary: #009b1a;

$color-quaduprary: #009b1a;

$color-alert: #FFC75F;

//sizes
$menu-button-width: 9.5rem;

//text

$text-large: 1.5rem;
$text-small: 1rem;
$text-supersmall: 0.8rem;

//round pixel

$round-small: 3px;
$round-medium: 10rem;
$round-large: 50%;

//CV header

$photoHeight: 80%;
$small-res-photoHeight: 90%;

//Media Queries

$max-width-intermediate-res: 1050px;
$max-width-medium-res: 730px;

$max-width-small-res: 564px;
$min-width-small-res: 565px;

//csv filters:

$filter-main:  invert(93%) sepia(90%) saturate(2%) hue-rotate(357deg) brightness(108%) contrast(100%);

json:

{
  "name": "photo-gallery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "react-transition-group": "^4.4.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "sass": "^1.49.9"
  }
}

正如你们所见,我试图用"变换原点:中心0(还try 了"变换原点:中心"和"变换原点:中心")但没有成功.

我在上面的js代码中也有两个警告,关于呈现列表中的键和StrictMode中不推荐的findDOMNode,但这是接下来两篇文章的内容.

提前感谢您的回答!!!

推荐答案

正如第一条 comments 中提到的,锚点的值被设置为15px,从而使其旋转偏离中心.为了让它工作,我要么删除右边的边距,要么用相同的值添加左边的边距.

多谢了,霍沃斯!

Javascript相关问答推荐

构造HTML表单以使用表单数据创建对象数组

使用LocaleCompare()进行排序时,首先使用大写字母

提交链接到AJAX数据结果的表单

更新动态数据中对象或数组中的所有值字符串

扩展类型的联合被解析为基类型

使用Nuxt Apollo在Piniastore 中获取产品细节

TinyMCE 6导致Data:Image对象通过提供的脚本过度上载

如何限制显示在分页中的可见页面的数量

JS Animate()方法未按预期工作

为什么延迟在我的laravel项目中不起作用?

JavaScript -复制到剪贴板在Windows计算机上无效

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

固定动态、self 调整的优先级队列

Node.js的Fetch()调用总是创建新的Express会话

将数据添加到数据库时不输出

如何在HTML中使用rxjs显示动态更新

无法将产品添加到Collection 夹屏幕并获取此TypeError:undefined不是函数?

从Java到Java的Port Inn代码验证

根据Vue 3中的父项宽度将props 值传递给子项

FromBody似乎没有处理C#API PUT调用,并且始终为空