Были две основные проблемы с вашим кодом:
duration
не поддерживает строковые значения, такие как «2s». Я изменил это на 2000
. styled.div
, posed.div
) внутри своей функции рендеринга. Это привело к тому, что React рассматривал эти компоненты как уникальные типы компонентов при каждом повторном рендеринге. Это приводит к тому, что эти компоненты демонтируются и монтируются при каждом рендеринге, что препятствует работе переходов, поскольку элемент не изменяется - вместо этого он заменяется новым компонентом другого типа. Ниже приведена рабочая версия вашего кода, которая перемещает определения компонентов за пределы функции рендеринга (UpFor
). Вы можете поиграть с ним в предоставленной песочнице.
import React, { useState } from "react";
import styled from "styled-components";
import posed from "react-pose";
const Container = styled.div`
font-family: "Baumans";
font-size: 220px;
display: flex;
cursor: pointer;
`;
const Up = styled.div`
color: #81d6e3;
`;
const Four = styled.div`
color: #ff101f;
`;
const Fours = styled.div`
display: flex;
`;
const MirroredFour = posed.div({
unhovered: { transform: "rotateY(0deg)" },
hovered: {
transform: "rotateY(180deg)",
transition: {
type: "tween",
duration: 2000
}
}
});
const SecondFour = styled(MirroredFour)`
color: #FF101F
position: absolute;
transform-origin: 67%;
`;
const UpFor = () => {
const [hovering, setHovering] = useState(false);
console.log("hovering", hovering);
return (
{
setHovering(true);
}}
onMouseLeave={() => {
setHovering(false);
}}
>
Up
4
4
);
};
export default UpFor;
Можно найти систему поиска исходного кода с учетом языка на Поисковая машина исходного кода SD . Он может работать со многими языками одновременно. Поиск шаблонов может выполняться на определенном языке, или шаблоны на разных языках (например, «найти идентификаторы, связанные с налогом»). Благодаря чувствительности к языковым токенам количество ложных срабатываний уменьшается, экономия времени пользователя. Он понимает C, C ++, C #, COBOL, Java, ECMAScript, Java, XML, Verilog, VHDL и ряд других языков. [Я директор компании]
I use glimpse for code search. I use the free command line tool, and not the paid web interface. It's very quick, and can be combined with other tools to quickly find what your looking for. I find it's easy to setup multiple repositories for different branches of the code. Additionally, I've created a few scripts to help query, format, and colorize the results.