From af0e382642133993f9aeeee23463d309d05c7b27 Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Sun, 15 Sep 2024 17:52:32 +0000
Subject: [PATCH] IsVisible etc works but doesn't fade in and out
---
src/App/App.tsx | 2 +-
src/App/LandingPage.css | 43 ++++++++-------------
src/components/landingpage/ContentBlock.tsx | 15 ++++++-
src/contents/Home.tsx | 41 +++++++-------------
4 files changed, 46 insertions(+), 55 deletions(-)
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 8e83db93..9b1bfc5d 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -4,7 +4,7 @@ import "./mediarules.css"
import "./Timelines.css";
import '../App/Graph.css';
import '../components/test.css'
-import '../App/LandingPage.css'
+import "./LandingPage.css"
import "../contents/example.css"
import "./App.scss";
import 'beautiful-react-diagrams/styles.css';
diff --git a/src/App/LandingPage.css b/src/App/LandingPage.css
index 7754eb3c..7a833446 100644
--- a/src/App/LandingPage.css
+++ b/src/App/LandingPage.css
@@ -1,28 +1,17 @@
-.base-width-height {
- width: 75vw;
- height: 100vh;
- }
-
- .fixed-pos {
- top: 0;
- left: 0;
- position: fixed;
- }
-
- .fade-in-out > img {
- opacity: 0;
- animation: fadeIn 5s;
- }
-
- .br-magenta{
- background-color: magenta;
- }
-
- .br-black{
+.content-block {
+ width:100vw;
+ height:100vh;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 1200ms ease-out, transform 600ms ease-out,
+ visibility 1200ms ease-out;
+ will-change: opacity, visibility;
+ background-color: black;
+}
+
+.content-block.is-visible {
+ opacity: 1;
+ transform: none;
+ visibility: visible;
background-color: black;
- }
-
- @keyframes fadeIn {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/landingpage/ContentBlock.tsx b/src/components/landingpage/ContentBlock.tsx
index d3adbb67..6736b4a7 100644
--- a/src/components/landingpage/ContentBlock.tsx
+++ b/src/components/landingpage/ContentBlock.tsx
@@ -1,6 +1,19 @@
+import React from 'react';
+
export function ContentBlock({file}:{file: string}) {
+ const [isVisible, setVisible] = React.useState(false);
+ const domRef = React.useRef(null)!;
+ React.useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
+
+
return(
- <div className="row col base-width-height">
+ <div className={`content-block${isVisible ? 'is-visible' : ''}`}
+ ref={domRef}>
{
<img src={file}></img>
}
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 38839037..96767c40 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,32 +1,21 @@
-import { ContentBlock } from "../components/landingpage/ContentBlock";
+import React from "react";
export function Home() {
+ const [isVisible, setVisible] = React.useState(false);
+ const domRef = React.useRef(null)!;
+ React.useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ entries.forEach(entry => console.log(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
return (
<>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/revitalized.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathdeepin.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathhold.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdbad.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdpanic.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdrelief.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdreliefdone.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/privilage.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threecircles.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threepeople.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/blockedairway.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/infection.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/maskpsych.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/fear.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/twenty.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/oneintwenty.webp"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/precyse.gif"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></ContentBlock>
- <ContentBlock file="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></ContentBlock>
- </>
+ <div className={`content-block${isVisible ? '.is-visible' : ''}`}
+ ref={domRef}>
+ <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
+ </div>
+ </>
);
}
--
GitLab