Skip to content

Commit 3520596

Browse files
christopherthielenchristopherthielen
committed
fix(examples): update animating-transitions example
1 parent 4c3d0c0 commit 3520596

4 files changed

Lines changed: 124 additions & 49 deletions

File tree

‎examples/animating-transitions/package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@uirouter/react": "^0.7.0",
7-
"react": "^16.3.2",
8-
"react-dom": "^16.3.2",
6+
"@uirouter/react": "^1.0.2",
7+
"react": "^16.13.1",
8+
"react-dom": "^16.13.1",
99
"react-scripts": "1.1.4",
10-
"react-transition-group": "^1.2.1"
10+
"react-transition-group": "^4.3.0"
1111
},
1212
"scripts": {
1313
"start": "react-scripts start",
1414
"build": "react-scripts build",
1515
"test": "react-scripts test --env=jsdom",
1616
"eject": "react-scripts eject"
17+
},
18+
"devDependencies": {
19+
"@types/react-transition-group": "^4.2.4"
1720
}
1821
}

‎examples/animating-transitions/src/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ body {
1414
transition: opacity 500ms ease-in;
1515
}
1616

17-
.example-leave {
17+
.example-exit {
1818
opacity: 1;
1919
}
2020

21-
.example-leave.example-leave-active {
21+
.example-exit.example-exit-active {
2222
opacity: 0.01;
2323
transition: opacity 300ms ease-in;
2424
}

‎examples/animating-transitions/src/index.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { render } from 'react-dom';
3-
import { CSSTransitionGroup } from 'react-transition-group';
3+
import { TransitionGroup, CSSTransition } from 'react-transition-group';
44
import { UIRouter, UIView, hashLocationPlugin } from '@uirouter/react';
55

66
import './index.css';
@@ -21,15 +21,19 @@ const states = [
2121
];
2222
const config = router => router.urlService.rules.initial({ state: 'home' });
2323

24+
const FadeTransition = props => <CSSTransition {...props} classNames="example" timeout={{ enter: 500, exit: 300 }} />;
25+
2426
const App = () => (
2527
<UIRouter plugins={[hashLocationPlugin]} states={states} config={config}>
2628
<div>
2729
<Menu />
2830
<UIView
2931
render={(RoutedComponent, props) => (
30-
<CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
31-
<RoutedComponent {...props} key={props.transition} />
32-
</CSSTransitionGroup>
32+
<TransitionGroup>
33+
<FadeTransition key={props.transition}>
34+
<RoutedComponent {...props} />
35+
</FadeTransition>
36+
</TransitionGroup>
3337
)}
3438
/>
3539
</div>

‎examples/animating-transitions/yarn.lock‎

Lines changed: 107 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,44 @@
22
# yarn lockfile v1
33

44

5-
"@uirouter/core@5.0.18":
6-
version "5.0.18"
7-
resolved "https://registry.yarnpkg.com/@uirouter/core/-/core-5.0.18.tgz#6dd85654ebc7e25eba2c1b32f069829db351abab"
5+
"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
6+
version "7.9.2"
7+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
8+
integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
9+
dependencies:
10+
regenerator-runtime "^0.13.4"
811

9-
"@uirouter/react@^0.7.0":
10-
version "0.7.0"
11-
resolved "https://registry.yarnpkg.com/@uirouter/react/-/react-0.7.0.tgz#3a98857bd5de1a19b6a551d74e8dd10cd7dc99e5"
12+
"@types/prop-types@*":
13+
version "15.7.3"
14+
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
15+
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
16+
17+
"@types/react-transition-group@^4.2.4":
18+
version "4.2.4"
19+
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
20+
integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==
21+
dependencies:
22+
"@types/react" "*"
23+
24+
"@types/react@*":
25+
version "16.9.27"
26+
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.27.tgz#7fc5db99e3ec3f21735b44d3560cff684856814a"
27+
integrity sha512-j+RvQb9w7a2kZFBOgTh+s/elCwtqWUMN6RJNdmz0ntmwpeoMHKnyhUcmYBu7Yw94Rtj9938D+TJSn6WGcq2+OA==
1228
dependencies:
13-
"@uirouter/core" "5.0.18"
29+
"@types/prop-types" "*"
30+
csstype "^2.2.0"
31+
32+
"@uirouter/core@6.0.4":
33+
version "6.0.4"
34+
resolved "https://registry.yarnpkg.com/@uirouter/core/-/core-6.0.4.tgz#fcdc75ab10f1035176acf87a27d9d27a0101ecf9"
35+
integrity sha512-TQ9XOzZY+jmWKkU4993MAEBIy7Bs3kijDzj+A6RHR8gq/3UoQm3Q/l1igfao5GZyBjid7eRVeipPK14ovCYQ3g==
36+
37+
"@uirouter/react@^1.0.2":
38+
version "1.0.2"
39+
resolved "https://registry.yarnpkg.com/@uirouter/react/-/react-1.0.2.tgz#a3690ff0435e7e57c1d0528038ccf9ef5ab74a0d"
40+
integrity sha512-PCKSuT2HOzE5Ub/QQ1N4hugL9hFJFnZjgp2vzjZRzfoqKwsFyCcU8PgQ5j3intqcbUqX4FR0ethXm0BZIfKsNA==
41+
dependencies:
42+
"@uirouter/core" "6.0.4"
1443
classnames "^2.2.5"
1544
prop-types "^15.6.1"
1645

@@ -1507,10 +1536,6 @@ center-align@^0.1.1:
15071536
align-text "^0.1.3"
15081537
lazy-cache "^1.0.3"
15091538

1510-
chain-function@^1.0.0:
1511-
version "1.0.0"
1512-
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
1513-
15141539
chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
15151540
version "1.1.3"
15161541
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -2016,6 +2041,11 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
20162041
dependencies:
20172042
cssom "0.3.x"
20182043

2044+
csstype@^2.2.0, csstype@^2.6.7:
2045+
version "2.6.9"
2046+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
2047+
integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
2048+
20192049
currently-unhandled@^0.4.1:
20202050
version "0.4.1"
20212051
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2244,9 +2274,13 @@ dom-converter@~0.1:
22442274
dependencies:
22452275
utila "~0.3"
22462276

2247-
dom-helpers@^3.2.0:
2248-
version "3.3.1"
2249-
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
2277+
dom-helpers@^5.0.1:
2278+
version "5.1.3"
2279+
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
2280+
integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
2281+
dependencies:
2282+
"@babel/runtime" "^7.6.3"
2283+
csstype "^2.6.7"
22502284

22512285
dom-serializer@0:
22522286
version "0.1.0"
@@ -4202,6 +4236,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
42024236
version "3.0.2"
42034237
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
42044238

4239+
"js-tokens@^3.0.0 || ^4.0.0":
4240+
version "4.0.0"
4241+
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
4242+
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
4243+
42054244
js-yaml@^3.4.3, js-yaml@^3.7.0:
42064245
version "3.8.4"
42074246
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
@@ -4502,6 +4541,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
45024541
dependencies:
45034542
js-tokens "^3.0.0"
45044543

4544+
loose-envify@^1.4.0:
4545+
version "1.4.0"
4546+
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
4547+
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
4548+
dependencies:
4549+
js-tokens "^3.0.0 || ^4.0.0"
4550+
45054551
loud-rejection@^1.0.0:
45064552
version "1.6.0"
45074553
resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -5668,14 +5714,23 @@ prop-types@^15.5.10:
56685714
fbjs "^0.8.9"
56695715
loose-envify "^1.3.1"
56705716

5671-
prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1:
5717+
prop-types@^15.6.1:
56725718
version "15.6.1"
56735719
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
56745720
dependencies:
56755721
fbjs "^0.8.16"
56765722
loose-envify "^1.3.1"
56775723
object-assign "^4.1.1"
56785724

5725+
prop-types@^15.6.2:
5726+
version "15.7.2"
5727+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
5728+
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
5729+
dependencies:
5730+
loose-envify "^1.4.0"
5731+
object-assign "^4.1.1"
5732+
react-is "^16.8.1"
5733+
56795734
proxy-addr@~1.1.4:
56805735
version "1.1.4"
56815736
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -5799,19 +5854,25 @@ react-dev-utils@^5.0.1:
57995854
strip-ansi "3.0.1"
58005855
text-table "0.2.0"
58015856

5802-
react-dom@^16.3.2:
5803-
version "16.3.2"
5804-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df"
5857+
react-dom@^16.13.1:
5858+
version "16.13.1"
5859+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
5860+
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
58055861
dependencies:
5806-
fbjs "^0.8.16"
58075862
loose-envify "^1.1.0"
58085863
object-assign "^4.1.1"
5809-
prop-types "^15.6.0"
5864+
prop-types "^15.6.2"
5865+
scheduler "^0.19.1"
58105866

58115867
react-error-overlay@^4.0.0:
58125868
version "4.0.0"
58135869
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
58145870

5871+
react-is@^16.8.1:
5872+
version "16.13.1"
5873+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
5874+
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
5875+
58155876
react-scripts@1.1.4:
58165877
version "1.1.4"
58175878
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.4.tgz#d5c230e707918d6dd2d06f303b10f5222d017c88"
@@ -5857,24 +5918,24 @@ react-scripts@1.1.4:
58575918
optionalDependencies:
58585919
fsevents "^1.1.3"
58595920

5860-
react-transition-group@^1.2.1:
5861-
version "1.2.1"
5862-
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
5921+
react-transition-group@^4.3.0:
5922+
version "4.3.0"
5923+
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
5924+
integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
58635925
dependencies:
5864-
chain-function "^1.0.0"
5865-
dom-helpers "^3.2.0"
5866-
loose-envify "^1.3.1"
5867-
prop-types "^15.5.6"
5868-
warning "^3.0.0"
5926+
"@babel/runtime" "^7.5.5"
5927+
dom-helpers "^5.0.1"
5928+
loose-envify "^1.4.0"
5929+
prop-types "^15.6.2"
58695930

5870-
react@^16.3.2:
5871-
version "16.3.2"
5872-
resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
5931+
react@^16.13.1:
5932+
version "16.13.1"
5933+
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
5934+
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
58735935
dependencies:
5874-
fbjs "^0.8.16"
58755936
loose-envify "^1.1.0"
58765937
object-assign "^4.1.1"
5877-
prop-types "^15.6.0"
5938+
prop-types "^15.6.2"
58785939

58795940
read-all-stream@^3.0.0:
58805941
version "3.1.0"
@@ -5982,6 +6043,11 @@ regenerator-runtime@^0.11.0:
59826043
version "0.11.1"
59836044
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
59846045

6046+
regenerator-runtime@^0.13.4:
6047+
version "0.13.5"
6048+
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
6049+
integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
6050+
59856051
regenerator-transform@0.9.11:
59866052
version "0.9.11"
59876053
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
@@ -6260,6 +6326,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
62606326
version "1.2.4"
62616327
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
62626328

6329+
scheduler@^0.19.1:
6330+
version "0.19.1"
6331+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
6332+
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
6333+
dependencies:
6334+
loose-envify "^1.1.0"
6335+
object-assign "^4.1.1"
6336+
62636337
schema-utils@^0.3.0:
62646338
version "0.3.0"
62656339
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -7175,12 +7249,6 @@ walker@~1.0.5:
71757249
dependencies:
71767250
makeerror "1.0.x"
71777251

7178-
warning@^3.0.0:
7179-
version "3.0.0"
7180-
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
7181-
dependencies:
7182-
loose-envify "^1.0.0"
7183-
71847252
watch@~0.10.0:
71857253
version "0.10.0"
71867254
resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"

0 commit comments

Comments
 (0)