From b75a254a8046b0bb39d86e18f78e3016b2417430 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 5 Sep 2021 20:46:29 +0200
Subject: [PATCH] animation: fade instead of flip

---
 client/src/components/Play.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Play.vue b/client/src/components/Play.vue
index 5d9e124..0081ee8 100644
--- a/client/src/components/Play.vue
+++ b/client/src/components/Play.vue
@@ -18,9 +18,9 @@ export default {
   computed: {
     cssLayoutClass() {
       if (this.$store.state.game.phase === 'reveal-start') {
-        return 'play__layout-playground__flip-out'
+        return 'play__layout-playground__fade-out'
       } else if (this.$store.state.game.phase === 'reveal-show-count') {
-        return 'play__layout-playground__flip-in'
+        return 'play__layout-playground__fade-in'
       }
 
       return
@@ -74,13 +74,13 @@ body,
       position: relative;
       flex-grow: 1;
 
-      &__flip-out {
-        animation: flip-out .5s ease-in-out;
+      &__fade-out {
+        animation: fade-out .5s ease-in-out;
         animation-fill-mode: forwards;
       }
 
-      &__flip-in {
-        animation: flip-in .5s linear;
+      &__fade-in {
+        animation: fade-in .5s linear;
         animation-fill-mode: forwards;
       }
     }
@@ -93,11 +93,11 @@ body,
   }
 
 }
-@keyframes flip-out {
-  to   { transform: rotateX(90deg); }
+@keyframes fade-out {
+  to   { opacity: 0; }
 }
-@keyframes flip-in {
-  0%   { transform: rotateX(90deg); }
-  90%  { transform: rotateX(0deg); }
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  90%  { opacity: 100%; }
 }
 </style>