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: {
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>