settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

animation: fade instead of flip

Browse Source
This commit is contained in:
Settel 2021-09-05 20:46:29 +02:00
parent e66a776e96
commit b75a254a80
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/Play.vue
View File

@ -18,9 +18,9 @@ export default {
computed: { computed: {
cssLayoutClass() { cssLayoutClass() {
if (this.$store.state.game.phase === 'reveal-start') { 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') { } else if (this.$store.state.game.phase === 'reveal-show-count') {
return 'play__layout-playground__flip-in' return 'play__layout-playground__fade-in'
} }
return return
@ -74,13 +74,13 @@ body,
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
&__flip-out { &__fade-out {
animation: flip-out .5s ease-in-out; animation: fade-out .5s ease-in-out;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
&__flip-in { &__fade-in {
animation: flip-in .5s linear; animation: fade-in .5s linear;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
} }
@ -93,11 +93,11 @@ body,
} }
} }
@keyframes flip-out { @keyframes fade-out {
to { transform: rotateX(90deg); } to { opacity: 0; }
} }
@keyframes flip-in { @keyframes fade-in {
0% { transform: rotateX(90deg); } 0% { opacity: 0; }
90% { transform: rotateX(0deg); } 90% { opacity: 100%; }
} }
</style> </style>