techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animations tweak

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-20 23:21:52 +01:00
parent 79f363a5a0
commit 31508dbb94
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
4 changed files with 80 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/App.vue
View File

@ -139,4 +139,41 @@ h1,h2,h3,h4,p,span{
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
} }
.fade-enter-active, .fade-leave-active {
transition: opacity 0.25s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.bounce-enter-active, .bounce-leave-active {
animation: bounce-in .5s;
}
.fade-enter, .bounce-leave-to {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(0);
}
}
</style> </style>

62
frontend/src/components/Card.vue
View File

@ -26,19 +26,19 @@ export default {
<style> <style>
.card { .card {
cursor: pointer; cursor: pointer;
width: 60pt; width: 60pt;
min-width:60pt; min-width:60pt;
height: 100pt; height: 100pt;
margin: 12pt; margin: 12pt;
background: white; background: white;
box-shadow: box-shadow:
0 0 0 3pt #987e51, 0 0 0 3pt #987e51,
0 0 0 6pt white, 0 0 0 6pt white,
0 0 5pt 6pt #aaa; 0 0 5pt 6pt #aaa;
border-radius: 6pt; border-radius: 6pt;
position: relative; position: relative;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
color: #333; color: #333;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -46,8 +46,8 @@ export default {
/* word-wrap: break-word; */ /* word-wrap: break-word; */
} }
.card.back{ .card.back{
color:white; color:white;
background: repeating-linear-gradient( background: repeating-linear-gradient(
45deg, 45deg,
#987e51, #987e51,
#987e51 5px, #987e51 5px,
@ -57,33 +57,33 @@ export default {
} }
.card.equipment { .card.equipment {
box-shadow: box-shadow:
0 0 0 3pt #5c5e83, 0 0 0 3pt #5c5e83,
0 0 0 6pt white, 0 0 0 6pt white,
0 0 5pt 6pt #aaa; 0 0 5pt 6pt #aaa;
} }
.card.character { .card.character {
box-shadow: box-shadow:
0 0 0 3pt #7c795b, 0 0 0 3pt #7c795b,
0 0 0 6pt white, 0 0 0 6pt white,
0 0 5pt 6pt #aaa; 0 0 5pt 6pt #aaa;
} }
.card h4 { .card h4 {
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 100%; width: 100%;
top: -10pt; top: -10pt;
} }
.card .emoji { .card .emoji {
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 100%; width: 100%;
font-size:26pt; font-size:26pt;
top: 35%; top: 35%;
} }
.card .suit { .card .suit {
position: absolute; position: absolute;
bottom: 3pt; bottom: 3pt;
left:3pt; left:3pt;
} }
</style> </style>

9
frontend/src/components/Chooser.vue
View File

@ -45,4 +45,13 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.card {
width: 72pt;
min-width:72pt;
height: 120pt;
}
.card:hover {
transform: translate(0, -5px) scale(1.05, 1.05);
}
</style> </style>

4
frontend/src/components/Lobby.vue
View File

@ -14,7 +14,9 @@
<player/> <player/>
</div> </div>
<chat/> <chat/>
<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/> <transition name="bounce">
<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/>
</transition>
</div> </div>
</template> </template>