Added animation when opening/closing articles

src/components/Article.js

@@ -1,8 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Theater from './subcomponents/Theater';
 import './css/Articles.css';
 
 const Article = ({article}) => {
+    const [show, setShow] = useState("");
+    const [currArticle, setCurrArticle] = useState("");
+
+    useEffect(()=>{
+        if (currArticle === ""){
+            console.log("A");
+            if (show === "") {
+                setCurrArticle(article);
+                setShow("open");
+                setTimeout(() =>{
+                    setShow("show");
+                }, 1024)
+            } else {
+                setShow("");
+            }
+        } else if (currArticle !== article) {
+            console.log("B");
+            setCurrArticle(article);
+            setShow("close");
+            setTimeout(()=>{
+                setShow("");
+                setTimeout(()=>{
+                    setShow("open");
+                    setTimeout(() =>{
+                        setShow("show");
+                    }, 1024);
+                }, 1024);
+            }, 24);
+        }
+    });
+    
     let linkProcessor = (text) => {
         /**
          * Given some text, processes and returns jsx with any link represented as an anchor
@@ -107,9 +138,9 @@ const Article = ({article}) => {
         });
         
     };
-
+    
     return (
-        <div className="article">
+        <div className={"article " + show}>
             <Theater
             title={article.title}
             description={article.desc}

src/components/css/Articles.css

@@ -3,6 +3,24 @@
     align-items: center;
     display: flex;
     flex-direction: column;
+    max-height:0;
+    overflow: hidden;
+    transition: max-height 1s ease;
+
+}
+
+.article.open {
+    max-height:100vh;
+    transition: max-height 1s ease;
+}
+
+.article.close {
+    max-height:100vh;
+}
+
+.article.show {
+    max-height:none;
+
 }
 
 .article .content {

src/components/css/Theater.css

@@ -15,7 +15,7 @@
 
 .theater-bg {
     
-    height: 100%;
+    height: inherit;
     width:100%;
     background-size: cover;
     background-image: url('../../img/background.webp');

src/components/subcomponents/Listing.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import '../css/Listing.css';
 
 const Listing = (props) => {
@@ -11,12 +12,12 @@ const Listing = (props) => {
      */
     return (
         <div className="listing">
-            <a href={props.link}>
+            <Link to={props.link}>
                 <div className="title">{props.title}</div>
                 <div className="content">
                     {props.children}
                 </div>
-            </a>
+            </Link>
         </div>
     );    
 };