From 641a572fc134c75fa216ed5b692e43a80800763f Mon Sep 17 00:00:00 2001 From: veikko Date: Wed, 29 Jun 2022 22:58:32 +0300 Subject: [PATCH] Add fade transition --- package-lock.json | 20 ++++ package.json | 2 + pages/_app.tsx | 1 + pages/info.tsx | 153 +++++++++++++++++----------- pages/performers.tsx | 25 +++-- pages/program.tsx | 198 ++++++++++++++++++++++--------------- styles/Info.module.scss | 2 +- styles/Program.module.scss | 2 +- styles/transitions.scss | 17 ++++ 9 files changed, 272 insertions(+), 148 deletions(-) create mode 100644 styles/transitions.scss diff --git a/package-lock.json b/package-lock.json index df2e641..5f2f96d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-icons": "^4.4.0", + "react-transition-group": "^4.4.2", "reactstrap": "^9.1.1", "sass": "^1.52.2" }, @@ -19,6 +20,7 @@ "@types/node": "17.0.40", "@types/react": "18.0.11", "@types/react-dom": "18.0.5", + "@types/react-transition-group": "^4.4.4", "eslint": "8.17.0", "eslint-config-next": "12.1.6", "typescript": "4.7.3" @@ -370,6 +372,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -3381,6 +3392,15 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz", + "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", diff --git a/package.json b/package.json index 86f7d8b..5583928 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-icons": "^4.4.0", + "react-transition-group": "^4.4.2", "reactstrap": "^9.1.1", "sass": "^1.52.2" }, @@ -20,6 +21,7 @@ "@types/node": "17.0.40", "@types/react": "18.0.11", "@types/react-dom": "18.0.5", + "@types/react-transition-group": "^4.4.4", "eslint": "8.17.0", "eslint-config-next": "12.1.6", "typescript": "4.7.3" diff --git a/pages/_app.tsx b/pages/_app.tsx index 10e009a..443055f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import '../styles/globals.scss'; +import '../styles/transitions.scss'; import type { AppProps } from 'next/app'; import Footer from './components/Footer'; import Header from './components/Header'; diff --git a/pages/info.tsx b/pages/info.tsx index f438c77..ce5aa79 100644 --- a/pages/info.tsx +++ b/pages/info.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import shared from '../styles/Shared.module.scss'; import styles from '../styles/Info.module.scss'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; +import { CSSTransition } from 'react-transition-group'; interface InfoToggles { shop: boolean; @@ -42,19 +43,27 @@ const Info = () => { )} - {infoToggles.shop && ( - <> -

- Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja - baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa - käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista - esim. mahdollisia kirjaostoksia varten. -

- - Kaupan kotisivut - - - )} + + {infoToggles.shop ? ( +
+

+ Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja + baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa + käteistä, mutta suosittelemme tuomaan käteistä rahaa kaupungista + esim. mahdollisia kirjaostoksia varten. +

+ + Kaupan kotisivut + +
+ ) : ( + <> + )} +
@@ -68,18 +77,26 @@ const Info = () => { )}
- {infoToggles.bus && ( - <> -

- Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle - 17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali - alueelle. -

- - Paikallisliikenteen bussiaikataulut - - - )} + + {infoToggles.bus ? ( +
+

+ Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle + 17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali + alueelle. +

+ + Paikallisliikenteen bussiaikataulut + +
+ ) : ( + <> + )} +
@@ -93,17 +110,27 @@ const Info = () => { )}
- {infoToggles.accom && ( - <> -

- Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja - (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela. -

- Vanha Salakuljettaja - Livonsaari Caravan - Saaristohotelli Vaihela - - )} + + {infoToggles.accom ? ( +
+

+ Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja + (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela. +

+ Vanha Salakuljettaja + + Livonsaari Caravan + + Saaristohotelli Vaihela +
+ ) : ( + <> + )} +
@@ -117,18 +144,26 @@ const Info = () => { )}
- {infoToggles.ferry && ( - <> -

- Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla - (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa - julkista tieverkostoa eli maksuton.) -

- - Aikataulut Palvaan ja Velkuanmaahan - - - )} + + {infoToggles.ferry ? ( +
+

+ Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla + (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa + julkista tieverkostoa eli maksuton.) +

+ + Aikataulut Palvaan ja Velkuanmaahan + +
+ ) : ( + <> + )} +
@@ -142,13 +177,21 @@ const Info = () => { )}
- {infoToggles.fb && ( - <> - - Tapahtuman facebook-sivut - - - )} + + {infoToggles.fb ? ( +
+ + Tapahtuman facebook-sivut + +
+ ) : ( + <> + )} +
diff --git a/pages/performers.tsx b/pages/performers.tsx index ad1e8a7..3f6f369 100644 --- a/pages/performers.tsx +++ b/pages/performers.tsx @@ -5,6 +5,7 @@ import shared from '../styles/Shared.module.scss'; import Performer from '../types/Performer'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import PerformersData from '../data/performers/2022'; +import { CSSTransition } from 'react-transition-group'; interface PerformerCard extends Performer { id: number; @@ -65,15 +66,21 @@ const Performers = () => { )} - {p.showDesc && ( - <> - {p.paragraphs.map((parag, index) => ( -

- {parag.toString()} -

- ))} - - )} + + {p.showDesc ? ( +
+ {p.paragraphs.map((parag, index) => ( +

{parag.toString()}

+ ))} +
+ ) : ( + + )} +
diff --git a/pages/program.tsx b/pages/program.tsx index 37903dd..a7a899e 100644 --- a/pages/program.tsx +++ b/pages/program.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import styles from '../styles/Program.module.scss'; import shared from '../styles/Shared.module.scss'; +import { CSSTransition } from 'react-transition-group'; interface DayToggles { wed: boolean; @@ -44,17 +45,25 @@ const Program = () => { )} - {dayToggles.wed && ( - <> -

- 18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu - rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla - (sateella sisällä). -

-

Sydämellisesti tervetuloa!

-

Paikka: Huhtakarintie 24, Livonsaari

- - )} + + {dayToggles.wed ? ( +
+

+ 18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu + rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla + (sateella sisällä). +

+

Sydämellisesti tervetuloa!

+

Paikka: Huhtakarintie 24, Livonsaari

+
+ ) : ( + <> + )} +
@@ -71,26 +80,34 @@ const Program = () => { )}
- {dayToggles.thu && ( - <> -

- 14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen - kokoonpanon, joka on saanut kolmannen kiinnityksen - kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021 - Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää - kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja - Laurin esittäminä. -

-

- 17-19 Runollinen, musiikillinen ja merellinen matinea Cafe - Laiturissa. Esiintymässä mm. Anja Erämaja. -

-

- Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, - Voiponlahdentie 37, Palva -

- - )} + + {dayToggles.thu ? ( +
+

+ 14-16 Ainot ja Lauri esittävät Lähellä-nimisen + poikkitaiteellisen kokoonpanon, joka on saanut kolmannen + kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa + marraskuussa 2021 Irja ja Veikko Aro-Heinilän pihamaalla. + Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto + Juurakon tekstejä Ainojen ja Laurin esittäminä. +

+

+ 17-19 Runollinen, musiikillinen ja merellinen matinea Cafe + Laiturissa. Esiintymässä mm. Anja Erämaja. +

+

+ Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri, + Voiponlahdentie 37, Palva +

+
+ ) : ( + <> + )} +
@@ -107,36 +124,45 @@ const Program = () => { )}
- {dayToggles.fri && ( - <> -

- 11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho. -

-

- Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja - viestintäkonsultti Laura Rantanen. -

-

- 14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä - puutarhalavalla tai myrskyn sattuessa Seurantalon salissa. -

-

- Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina - Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso. -

-

- Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä - Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, - kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso, - koskettimet), Roberto Lanz (rummut). -

-

- Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen - tori. -

-

Paikka: Sinervon talo, Sauniementie 5, Teersalo

- - )} + + {dayToggles.fri ? ( +
+

+ 11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati + Urho. +

+

+ Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja + viestintäkonsultti Laura Rantanen. +

+

+ 14-20 Runoutta, musiikkia ja poikkitaiteellisia yllätyksiä + puutarhalavalla tai myrskyn sattuessa Seurantalon salissa. +

+

+ Esiintymässä mm. Kari Aronpuro, Sanna Karlström, Katariina + Vuorinen, Aki Salmela, Heidi Iivari ja Laura Laakso. +

+

+ Musiikillisesta puolesta vastaa saksofonisti Mikko Innanen sekä + Äyräs-kokoonpano: Olga Välimaa (laulu), Kauko Röyhkä (laulu, + kitara, basso), Ilkka Turta (kitara), Kimmo Laine (basso, + koskettimet), Roberto Lanz (rummut). +

+

+ Tapahtuman ajan Sinervon talolla pitää majaa kiehtovien kirjojen + tori. +

+

Paikka: Sinervon talo, Sauniementie 5, Teersalo

+
+ ) : ( + <> + )} +
@@ -153,27 +179,35 @@ const Program = () => { )}
- {dayToggles.sat && ( - <> -

- 13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen - äärelle. -

-

- Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat - luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii - myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden - kanssa ja ihailemaan ympäröivää luontoa. -

-

- Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen - (luuttu). -

-

- Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa -

- - )} + + {dayToggles.sat ? ( +
+

+ 13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu + mystisen äärelle. +

+

+ Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat + luomiinsa maailmoihin yhdessä muusikoiden kanssa. Samalla ehtii + myös nauttimaan lounasta, juttelemaan muiden festarikävijöiden + kanssa ja ihailemaan ympäröivää luontoa. +

+

+ Juha Kulmala ja Diodi-yhtye, Saila Susiluoto ja Markku Pääskynen + (luuttu). +

+

+ Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa +

+
+ ) : ( + <> + )} +
diff --git a/styles/Info.module.scss b/styles/Info.module.scss index 4b6fc5a..49bd5d8 100644 --- a/styles/Info.module.scss +++ b/styles/Info.module.scss @@ -8,7 +8,7 @@ width: 80%; } - p { + div { width: 80%; } } diff --git a/styles/Program.module.scss b/styles/Program.module.scss index d2c5247..2020319 100644 --- a/styles/Program.module.scss +++ b/styles/Program.module.scss @@ -9,7 +9,7 @@ width: 80%; } - p { + div { width: 80%; } } diff --git a/styles/transitions.scss b/styles/transitions.scss new file mode 100644 index 0000000..266ca42 --- /dev/null +++ b/styles/transitions.scss @@ -0,0 +1,17 @@ +.fadeTransition-enter { + opacity: 0; +} + +.fadeTransition-enter-active { + opacity: 1; + transition: opacity 1000ms; +} + +.fadeTransition-exit { + opacity: 1; +} + +.fadeTransition-exit-active { + opacity: 0; + transition: opacity 1000ms; +}