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

new animations

Browse Source
This commit is contained in:
Alberto Xamin 2021-01-20 12:29:13 +01:00
parent 7f6912f07e
commit 294e3c928d
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/Deck.vue
View File

@ -149,6 +149,44 @@ export default {
transform: translate(0, 0) scale(1);
}
}
@keyframes pick {
0% {
transform: translate(0,0);
z-index: 1;
}
50% {
transform: translate(-10px,0);
z-index: 1;
}
100% {
transform: translate(0,0);
z-index: 1;
}
}
@keyframes draw {
0% {
transform: translate(0,0);
z-index: 1;
}
50% {
transform: translate(0,10px);
z-index: 1;
}
100% {
transform: translate(0,0);
z-index: 1;
}
}
.pick {
animation-duration: 2s;
animation-name: pick;
animation-iteration-count: infinite;
}
.draw {
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
}
.pick:hover {
transform: translate(-10px,0);
z-index: 1;

12
frontend/src/components/Player.vue
View File

@ -26,7 +26,7 @@
<button v-if="is_my_turn && character.name === 'Doc Holyday' && special_use_count < 1 && hand.length > 1" @click="holydayScrap=true">{{$t('special_ability')}}</button>
<div v-if="lives > 0 || is_ghost" style="position:relative">
<span id="hand_text">{{$t('hand')}}</span>
<transition-group name="list" tag="div" class="hand">
<transition-group name="list" tag="div" :class="{hand:true, 'play-cards':pending_action===2}">
<Card v-for="card in handComputed" v-bind:key="card.name+card.number" :card="card"
@click.native="play_card(card, false)"
@pointerenter.native="hint=($i18n.locale=='it'?card.desc:card.desc_eng)" @pointerleave.native="hint=''"
@ -442,4 +442,14 @@ export default {
visibility: hidden;
}
}
/* @keyframes play-cards {
50% {
background: rgba(204, 204, 204, 0.3);
}
}
.play-cards {
animation: play-cards;
animation-duration: 3s;
animation-iteration-count: infinite;
} */
</style>