Added animation when opening/closing articles
This commit is contained in:
parent
d8e5dbe1a4
commit
95d738db3c
|
|
@ -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
|
||||
|
|
@ -109,7 +140,7 @@ const Article = ({article}) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="article">
|
||||
<div className={"article " + show}>
|
||||
<Theater
|
||||
title={article.title}
|
||||
description={article.desc}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.theater-bg {
|
||||
|
||||
height: 100%;
|
||||
height: inherit;
|
||||
width:100%;
|
||||
background-size: cover;
|
||||
background-image: url('../../img/background.webp');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue