From d9e4b8cb5964098efacfe68f8767acf9201b6a53 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Fri, 24 Apr 2020 00:28:00 -0700
Subject: [PATCH] smooth fade-in/out for layers!

---
 package.json          |  3 ++-
 src/OutfitPreview.css | 17 +++++++++++++++++
 src/OutfitPreview.js  | 36 +++++++++++++++++++++++++-----------
 yarn.lock             | 20 +++++++++++++++++++-
 4 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 src/OutfitPreview.css

diff --git a/package.json b/package.json
index 51067ea..9b043bf 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "mysql2": "^2.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-transition-group": "^4.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/OutfitPreview.css b/src/OutfitPreview.css
new file mode 100644
index 0000000..c2a7455
--- /dev/null
+++ b/src/OutfitPreview.css
@@ -0,0 +1,17 @@
+.outfit-preview-layer-exit {
+  opacity: 1;
+}
+
+.outfit-preview-layer-exit-active {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.outfit-preview-layer-image {
+  opacity: 0.01;
+}
+
+.outfit-preview-layer-image[src] {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index 059d22f..b26185d 100644
--- a/src/OutfitPreview.js
+++ b/src/OutfitPreview.js
@@ -1,10 +1,13 @@
 import React from "react";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
 import { Flex, Image, Spinner, Text, Icon, Box } from "@chakra-ui/core";
 
 import { Delay } from "./util";
 
+import "./OutfitPreview.css";
+
 function OutfitPreview({ itemIds, speciesId, colorId }) {
   const { loading, error, data } = useQuery(
     gql`
@@ -45,7 +48,6 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     `,
     {
       variables: { itemIds, speciesId, colorId },
-      returnPartialData: true,
     }
   );
 
@@ -63,16 +65,28 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
 
   return (
     <Box pos="relative" height="100%" width="100%">
-      {getVisibleLayers(data).map((layer) => (
-        <FullScreenCenter key={layer.id}>
-          <Image
-            src={layer.imageUrl}
-            objectFit="contain"
-            maxWidth="100%"
-            maxHeight="100%"
-          />
-        </FullScreenCenter>
-      ))}
+      <TransitionGroup>
+        {getVisibleLayers(data).map((layer) => (
+          <CSSTransition
+            key={layer.id}
+            classNames={{
+              exit: "outfit-preview-layer-exit",
+              exitActive: "outfit-preview-layer-exit-active",
+            }}
+            timeout={200}
+          >
+            <FullScreenCenter>
+              <Image
+                src={layer.imageUrl}
+                objectFit="contain"
+                maxWidth="100%"
+                maxHeight="100%"
+                className="outfit-preview-layer-image"
+              />
+            </FullScreenCenter>
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
       {loading && (
         <Delay>
           <FullScreenCenter>
diff --git a/yarn.lock b/yarn.lock
index 12a0a8d..7eb3aa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4247,7 +4247,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.9:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7, csstype@^2.6.9:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -4523,6 +4523,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -9682,6 +9690,16 @@ react-spring@^8.0.27:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
+react-transition-group@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"