Add fade transition

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",

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"

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';

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,8 +43,13 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.shop && (
+        <CSSTransition
-          <>
+          in={infoToggles.shop}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.shop ? (
+            <div>
               <p>
                 Livonsaaren osuuskauppa palvelee klo 9-19 joka päivä. Keittiö ja
                 baari 12-19 to-pe. Ostosten yhteydessä mahdollista nostaa
@@ -53,8 +59,11 @@ const Info = () => {
               <a href='https://https//livonsaarenosuuskauppa.fi/'>
                 Kaupan kotisivut
               </a>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -68,8 +77,13 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.bus && (
+        <CSSTransition
-          <>
+          in={infoToggles.bus}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.bus ? (
+            <div>
               <p>
                 Bussi 403 lähteen Turusta ma-pe 16:30 ja saapuu Livonsaarelle
                 17:37 ja Velkualle 17:48. Tämä on ainoa suorayhteys festivaali
@@ -78,8 +92,11 @@ const Info = () => {
               <a href='https://https//www.foli.fi/fi'>
                 Paikallisliikenteen bussiaikataulut
               </a>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -93,17 +110,27 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.accom && (
+        <CSSTransition
-          <>
+          in={infoToggles.accom}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.accom ? (
+            <div>
               <p>
                 Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
                 (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
               </p>
               <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
-            <a href='https://www.livonsaarencaravan.fi/'>Livonsaari Caravan</a>
+              <a href='https://www.livonsaarencaravan.fi/'>
+                Livonsaari Caravan
+              </a>
               <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -117,8 +144,13 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.ferry && (
+        <CSSTransition
-          <>
+          in={infoToggles.ferry}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.ferry ? (
+            <div>
               <p>
                 Lossiyhteydet Palvaan ja Velkuanmaahan Finferries-sivustolla
                 (huom. yövuoro edellyttää tilauksen etukäteen. Lossi on osa
@@ -127,8 +159,11 @@ const Info = () => {
               <a href='https://www.finferries.fi/lauttaliikenne/lauttapaikat-ja-aikataulut/velkuanmaa.html'>
                 Aikataulut Palvaan ja Velkuanmaahan
               </a>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.infoContainer}>
@@ -142,13 +177,21 @@ const Info = () => {
             )}
           </button>
         </div>
-        {infoToggles.fb && (
+        <CSSTransition
-          <>
+          in={infoToggles.fb}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {infoToggles.fb ? (
+            <div>
               <a href='https://https//www.facebook.com/Runosaari-festivaali-110533364561933'>
                 Tapahtuman facebook-sivut
               </a>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
     </section>

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 = () => {
                 )}
               </button>
             </div>
-            {p.showDesc && (
+            <CSSTransition
-              <>
+              in={p.showDesc}
+              timeout={1000}
+              classNames='fadeTransition'
+            >
+              {p.showDesc ? (
+                <div>
                   {p.paragraphs.map((parag, index) => (
-                  <p className={styles.performerDescription} key={index}>
+                    <p key={index}>{parag.toString()}</p>
-                    {parag.toString()}
-                  </p>
                   ))}
-              </>
+                </div>
+              ) : (
+                <span></span>
               )}
+            </CSSTransition>
             <hr />
           </div>
         </div>

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,8 +45,13 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.wed && (
+        <CSSTransition
-          <>
+          in={dayToggles.wed}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.wed ? (
+            <div>
               <p>
                 18-20 Olen polkuni päässä -illassa Ella Pyhältö lausuu
                 rakastettuja runoja Irja ja Veikko Aro-Heinilän kotipihalla
@@ -53,8 +59,11 @@ const Program = () => {
               </p>
               <p>Sydämellisesti tervetuloa!</p>
               <p>Paikka: Huhtakarintie 24, Livonsaari</p>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -71,15 +80,20 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.thu && (
+        <CSSTransition
-          <>
+          in={dayToggles.thu}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.thu ? (
+            <div>
               <p>
-              14-16 Ainot ja Lauri esittävät Lähellä-nimisen poikkitaiteellisen
+                14-16 Ainot ja Lauri esittävät Lähellä-nimisen
-              kokoonpanon, joka on saanut kolmannen kiinnityksen
+                poikkitaiteellisen kokoonpanon, joka on saanut kolmannen
-              kiertopalkintoon Willi Kansa -katselmuksessa marraskuussa 2021
+                kiinnityksen kiertopalkintoon Willi Kansa -katselmuksessa
-              Irja ja Veikko Aro-Heinilän pihamaalla. Toisessa osassa iltapäivää
+                marraskuussa 2021 Irja ja Veikko Aro-Heinilän pihamaalla.
-              kuullaan Irja Aro-Heinilän ja Arto Juurakon tekstejä Ainojen ja
+                Toisessa osassa iltapäivää kuullaan Irja Aro-Heinilän ja Arto
-              Laurin esittäminä.
+                Juurakon tekstejä Ainojen ja Laurin esittäminä.
               </p>
               <p>
                 17-19 Runollinen, musiikillinen ja merellinen matinea Cafe
@@ -89,8 +103,11 @@ const Program = () => {
                 Paikka: Huhtakarintie 24, Livonsaari sekä Cafe Laituri,
                 Voiponlahdentie 37, Palva
               </p>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -107,10 +124,16 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.fri && (
+        <CSSTransition
-          <>
+          in={dayToggles.fri}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.fri ? (
+            <div>
               <p>
-              11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati Urho.
+                11-14 Monologityöpaja, vetäjä teatteritaiteen maisteri Kati
+                Urho.
               </p>
               <p>
                 Ympäristöjargonia luovasti -työpaja, vetäjä journalisti ja
@@ -135,8 +158,11 @@ const Program = () => {
                 tori.
               </p>
               <p>Paikka: Sinervon talo, Sauniementie 5, Teersalo</p>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
       <div className={styles.dayContainer}>
@@ -153,11 +179,16 @@ const Program = () => {
             )}
           </button>
         </div>
-        {dayToggles.sat && (
+        <CSSTransition
-          <>
+          in={dayToggles.sat}
+          timeout={1000}
+          classNames='fadeTransition'
+        >
+          {dayToggles.sat ? (
+            <div>
               <p>
-              13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu mystisen
+                13-17 Runollinen iltapäivä. Romanttinen Velkuanmaa kutsuu
-              äärelle.
+                mystisen äärelle.
               </p>
               <p>
                 Saaristohotelli Vaihelan terassilla runoilijat vievät kuulijat
@@ -172,8 +203,11 @@ const Program = () => {
               <p>
                 Paikka: Vaihelan saaristohotelli, Velkuanmaantie 168, Velkuanmaa
               </p>
-          </>
+            </div>
+          ) : (
+            <></>
           )}
+        </CSSTransition>
         <hr />
       </div>
     </section>

styles/Info.module.scss

@@ -8,7 +8,7 @@
     width: 80%;
   }
 
-  p {
+  div {
     width: 80%;
   }
 }

styles/Program.module.scss

@@ -9,7 +9,7 @@
     width: 80%;
   }
 
-  p {
+  div {
     width: 80%;
   }
 }

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;
+}