[feat] add animations

tinajeong · Aug 12, 2022 · 7385e1c · 7385e1c · vercel · Aug 12, 2022
1 parent 51deff4
commit 7385e1c
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react-query": "^3.38.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
+    "react-transition-group": "1.x",
     "typescript": "^4.6.3"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,20 @@
 .App {
   text-align: left;
 }
+
+.off {
+  visibility: hidden;
+}
+
+.on {
+  visibility: visible;
+}
+
+.example-appear {
+  opacity: 0.01;
+}
+
+.example-appear.example-appear-active {
+  opacity: 1;
+  transition: opacity .5s ease-in;
+}
diff --git a/src/component/Artwork.tsx b/src/component/Artwork.tsx
@@ -9,7 +9,7 @@ import {
   assertIsArtobject,
   assertIsHash,
 } from "../types/Types";
-
+import { CSSTransitionGroup } from "react-transition-group";
 const searchTitle = (event) => {
   const artist = event.target.getAttribute("data-title");
   window.open("https://www.metmuseum.org/search-results?q=" + artist, "_blank");
@@ -111,82 +111,90 @@ export default function Artwork() {
   return (
     <div className="artwork">
       {fetched ? (
-        <div className="h-screen grid md:grid-cols-2 md:grid-rows-1 sm:grid-rows-2 sm:grid-cols-1 place-items-center gap-1 md:border-x-2 bg-white">
-          <img
-            src={fetched["primaryImage"] + "?tr=w-1,h-1"}
-            alt={"artwork image"}
-            className="p-8 md:max-w-md lg:max-w-lg"
-            loading="lazy"
-          />
-          <div className="flex flex-col border-l-4 border-slate-300 p-4">
-            <div
-              className="flex flex-row flex-wrap transition ease-in-out delay-150 hover:scale-105 hover:text-slate-500 duration-150 justify-self-start tracking-tight font-extrabold bg-white text-slate-900 text-3xl md:text-2xl sm:text-lg mb-2"
-              onClick={searchTitle}
-              data-title={fetched["title"]}
-            >
-              <span
-                className="place-content-starts"
+        <CSSTransitionGroup
+          transitionName="example"
+          transitionAppear={true}
+          transitionAppearTimeout={500}
+          transitionEnter={false}
+          transitionLeave={false}
+        >
+          <div className="grid md:grid-cols-2 md:grid-rows-1 sm:grid-rows-2 sm:grid-cols-1 place-items-center md:border-x-2 bg-white">
+            <img
+              src={fetched["primaryImage"] + "?tr=w-1,h-1"}
+              alt={"artwork image"}
+              className="p-8 md:max-w-md lg:max-w-lg"
+              loading="lazy"
+            />
+            <div className="flex flex-col border-l-4 border-slate-300 p-4">
+              <div
+                className="flex flex-row flex-wrap transition ease-in-out delay-150 hover:scale-105 hover:text-slate-500 duration-150 justify-self-start tracking-tight font-extrabold bg-white text-slate-900 text-3xl md:text-2xl sm:text-lg mb-2"
+                onClick={searchTitle}
                 data-title={fetched["title"]}
               >
-                {fetched.title}
-              </span>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4 mt-1 ml-1"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <h2
-              className="flex flex-row flex-wrap underline underline-offset-4 max-w-sm ml-0 text-slate-900 hover:scale-110 hover:text-slate-500 duration-150 font-extrabold text-2xl md:text-xl sm:text-md"
-              onClick={searchArtistName}
-              onMouseEnter={setSearchButtonView}
-              onMouseOut={setSearchButtonView}
-              data-artist-name={fetched["artistDisplayName"]}
-            >
-              <span
-                className="w-auto"
-                data-artist-name={fetched["artistDisplayName"]}
-              >
-                {fetched["artistDisplayName"]}
-              </span>
-              {isShown && (
+                <span
+                  className="place-content-starts"
+                  data-title={fetched["title"]}
+                >
+                  {fetched.title}
+                </span>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 mt-1 mx-0.5"
+                  className="h-4 w-4 mt-1 ml-1"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
-                  data-artist-name={fetched["artistDisplayName"]}
+                  strokeWidth={2}
                 >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
-              )}
-            </h2>
-            <div> </div>
-            <h3 className="text-slate-500 float-center hover:underline">
-              {fetched["dimensions"]}
-            </h3>
-            <h3 className="text-slate-500 float-center hover:underline">
-              {fetched["medium"]}
-            </h3>
-            <h3 className="text-slate-500 float-center hover:underline">
-              {fetched["objectDate"]}
-            </h3>
+              </div>
+              <h2
+                className="flex flex-row flex-wrap underline underline-offset-4 max-w-sm ml-0 text-slate-900 hover:scale-110 hover:text-slate-500 duration-150 font-extrabold text-2xl md:text-xl sm:text-md"
+                onClick={searchArtistName}
+                onMouseEnter={setSearchButtonView}
+                onMouseOut={setSearchButtonView}
+                data-artist-name={fetched["artistDisplayName"]}
+              >
+                <span
+                  className="w-auto"
+                  data-artist-name={fetched["artistDisplayName"]}
+                >
+                  {fetched["artistDisplayName"]}
+                </span>
+                {isShown && (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-4 w-4 mt-1 mx-0.5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    data-artist-name={fetched["artistDisplayName"]}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                )}
+              </h2>
+              <div> </div>
+              <h3 className="text-slate-500 float-center hover:underline">
+                {fetched["dimensions"]}
+              </h3>
+              <h3 className="text-slate-500 float-center hover:underline">
+                {fetched["medium"]}
+              </h3>
+              <h3 className="text-slate-500 float-center hover:underline">
+                {fetched["objectDate"]}
+              </h3>
+            </div>
           </div>
-        </div>
+        </CSSTransitionGroup>
       ) : (
         <Loading />
       )}

diff --git a/yarn.lock b/yarn.lock
@@ -1015,6 +1015,13 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
@@ -2811,6 +2818,11 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
+chain-function@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
+  integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
+
 chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3607,6 +3619,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -6040,7 +6059,7 @@ lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7389,7 +7408,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.5.6, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7634,6 +7653,17 @@ [email protected]:
   optionalDependencies:
     fsevents "^2.3.2"
 
+[email protected]:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+  integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.6"
+    warning "^3.0.0"
+
 react@^18.0.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
@@ -9025,6 +9055,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"