Skip to content

Commit

Permalink
Use react-css-transition-replace library to handle absolute positioning
Browse files Browse the repository at this point in the history 
https://github.com/marnusw/react-css-transition-replace

It is possible though that
reactjs/react-transition-group#470 does what
we want.
  • Loading branch information
@mnvr
mnvr committed Nov 22, 2023
1 parent a60df27 commit 15f5c2e
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 48 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -36,10 +36,10 @@
"hydra-synth": "^1.3.29",
"raf-loop": "^1.1.3",
"react": "^18.2.0",
"react-css-transition-replace": "^5.0.1",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-transition-group": "^4.4.5",
"styled-components": "^5.3.11",
"tldts": "^6.0.15"
},
Expand All @@ -49,8 +49,8 @@
"@types/node": "^20.3.2",
"@types/p5": "1.3.3",
"@types/react": "^18.2.14",
"@types/react-css-transition-replace": "^2.1.7",
"@types/react-dom": "^18.2.6",
"@types/react-transition-group": "^4.4.9",
"@types/styled-components": "^5.1.26",
"gatsby-plugin-root-import": "^2.0.9",
"patch-package": "^8.0.0",
Expand Down
42 changes: 16 additions & 26 deletions pages/quotes/index.tsx
View file
@@ -1,5 +1,5 @@
import * as React from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import ReactCSSTransitionReplace from "react-css-transition-replace";
import styled from "styled-components";
import { ensure } from "utils/ensure";
import { randomInt, randomItem } from "utils/random";
Expand Down Expand Up @@ -50,62 +50,52 @@ const Quotes: React.FC = () => {
interface QuoteContainerProps {
quoteIndex: number;
}

/**
* A container for a quote that animates the transition between them.
*
* The QuoteContainer is a {@link TransitionGroup} that has a single child - a
* {@link CSSTransition} that wraps the children of the QuoteContainer (which'll
* be a {@link Quote}).
*
* @param quoteIndex A unique index for each quote. This is set as the key of
* the CSSTransition child, thus causing the TransitionGroup to transition the
* child out and back in.
* @param quoteIndex A unique index for each quote.
*/
const QuoteContainer: React.FC<
React.PropsWithChildren<QuoteContainerProps>
> = ({ quoteIndex, children }) => {
return (
<QuoteContainer_>
<TransitionGroup>
<CSSTransition
key={quoteIndex.toString()}
classNames="fade"
timeout={2000}
>
{children}
</CSSTransition>
</TransitionGroup>
<ReactCSSTransitionReplace
transitionName={"fade"}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<div key={quoteIndex.toString()}>{children}</div>
</ReactCSSTransitionReplace>
</QuoteContainer_>
);
};

const QuoteContainer_ = styled.div`
background-color: red;
position: relative;
div {
border: 1px solid green;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.fade-enter {
opacity: 0;
z-index: 1;
}
.fade-enter-active {
opacity: 1;
transition: opacity 1000ms;
}
.fade-exit {
.fade-leave {
opacity: 1;
}
.fade-exit-active {
.fade-leave-active {
opacity: 0;
transition: opacity 1000ms;
}
.fade-height {
transition: height 500ms;
}
`;

interface ParsedQuotes {
Expand Down
59 changes: 39 additions & 20 deletions yarn.lock
View file
Expand Up @@ -1113,7 +1113,7 @@
dependencies:
regenerator-runtime "^0.13.11"

"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
"@babel/runtime@^7.8.7":
version "7.23.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
Expand Down Expand Up @@ -2422,20 +2422,36 @@
dependencies:
"@types/react" "*"

"@types/react-addons-css-transition-group@*":
version "15.0.10"
resolved "https://registry.yarnpkg.com/@types/react-addons-css-transition-group/-/react-addons-css-transition-group-15.0.10.tgz#3c18f8fe7789de78b2dfde13ad724104584ba644"
integrity sha512-AYYMb4+jsgHPsxst7e8WuWVp8qAwp9YV16FJdEXILAsp7SFKIRln1hlrw9fRKUJYte3SKqiNZ8riRXvP2WtLlA==
dependencies:
"@types/react" "^15"
"@types/react-addons-transition-group" "*"

"@types/react-addons-transition-group@*":
version "15.0.10"
resolved "https://registry.yarnpkg.com/@types/react-addons-transition-group/-/react-addons-transition-group-15.0.10.tgz#eeaff46b9a6d318a3337fc43dd789e2c817db485"
integrity sha512-nV0vlq1ClUicGuDP5ocAHxsqWxjlxB+sBTF/+UMrafIJ/whkvmDrDGq/i0IcbnwptEXXmZKEQDYJ1F+0Vuao+A==
dependencies:
"@types/react" "^15"

"@types/react-css-transition-replace@^2.1.7":
version "2.1.7"
resolved "https://registry.yarnpkg.com/@types/react-css-transition-replace/-/react-css-transition-replace-2.1.7.tgz#6ab710946d3d5c7379787c0ec6bfe32b7b019911"
integrity sha512-SFbjNtKXWjkiRC7jl5vaMFJORf6qsPS+2M1B1oOTVKs2NT88YycGjbS6eXrtYnqBy8z+o5Ays0t4lIx11Kq2TQ==
dependencies:
"@types/react" "^15"
"@types/react-addons-css-transition-group" "*"

"@types/react-dom@^18.2.6":
version "18.2.6"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.6.tgz#ad621fa71a8db29af7c31b41b2ea3d8a6f4144d1"
integrity sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==
dependencies:
"@types/react" "*"

"@types/react-transition-group@^4.4.9":
version "4.4.9"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.9.tgz#12a1a1b5b8791067198149867b0823fbace31579"
integrity sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==
dependencies:
"@types/react" "*"

"@types/react@*", "@types/react@>=16", "@types/react@^18.2.14":
version "18.2.14"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
Expand All @@ -2445,6 +2461,11 @@
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/react@^15":
version "15.7.27"
resolved "https://registry.yarnpkg.com/@types/react/-/react-15.7.27.tgz#6ca13051229bc83901317c44e1a1ed86edc8ee1a"
integrity sha512-jLB0GLKJXo9uDjsucKzO32lMENh4fnE2tp8lWp6VfLshKoCeJt+GNERuSlucwY8zIlkqS5CA53IyeHwCaY+p3w==

"@types/responselike@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
Expand Down Expand Up @@ -4350,7 +4371,7 @@ dom-converter@^0.2.0:
dependencies:
utila "~0.4"

dom-helpers@^5.0.1:
dom-helpers@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
Expand Down Expand Up @@ -8976,7 +8997,7 @@ prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.6.2, prop-types@^15.8.1:
prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -9129,6 +9150,14 @@ rc@1.2.8, rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-css-transition-replace@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-css-transition-replace/-/react-css-transition-replace-5.0.1.tgz#15f19ce06ffa4f86fd97633cee42025fe40b07f4"
integrity sha512-Pi5hk/FXZJ1eVkUgI8lTbGrlOz5fSe7GkSkzG1JCsL6+c7hT62Tw+dv3Wbo5nKL25QQB+iS4GdRYf051RwERqg==
dependencies:
dom-helpers "^5.2.1"
prop-types "^15.8.1"

react-dev-utils@^12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
Expand Down Expand Up @@ -9203,16 +9232,6 @@ react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825:
loose-envify "^1.1.0"
neo-async "^2.6.1"

react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
Expand Down

0 comments on commit 15f5c2e

Please sign in to comment.