migration

Author: MacKentoch

front/src/components/fadeInEntrance/FadeInEntrance.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import FadeInDiv from './styled/FadeInDiv';
+
+type Props = {
+  children: any;
+};
+
+function FadeInEntrance({ children }: Props) {
+  return <FadeInDiv startAnimation>{children}</FadeInDiv>;
+}
+
+FadeInEntrance.displayName = 'FadeInEntrance';
+
+export default FadeInEntrance;

front/src/components/fadeInEntrance/index.ts

@@ -0,0 +1,3 @@
+import FadeInEntrance from './FadeInEntrance';
+
+export default FadeInEntrance;

front/src/components/fadeInEntrance/styled/FadeInDiv.tsx

@@ -0,0 +1,30 @@
+import styled, { keyframes, css } from 'styled-components';
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+`;
+
+const fadeInAnimationCss = css`
+  opacity: 0;
+  animation-name: ${fadeIn};
+  animation-timing-function: ease-in;
+  animation-duration: 0.7s;
+  animation-delay: 0s;
+  animation-fill-mode: both;
+`;
+
+type FadeInProps = {
+  startAnimation: boolean;
+};
+
+const FadeInDiv = styled.div<FadeInProps>`
+  ${({ startAnimation }) => startAnimation && fadeInAnimationCss};
+`;
+
+export default FadeInDiv;