💄 Поменял задержку до анимации

Вероятно менее дергано будет появляться правильный ответ
This commit is contained in:
2021-03-30 00:05:48 +03:00
parent eeeca86eab
commit b9beb3887e

View File

@@ -1,19 +1,21 @@
<template> <template>
<div class="card" v-if="card !== null" v-on:click="nextCard()" v-bind:class="{clickable: showResult}"> <div>
<img class="meme" v-bind:src="card.image"> <div class="card" v-if="card !== null" v-on:click="nextCard()" v-bind:class="{clickable: showResult}">
<h2>Кто скинул этот мем?</h2> <img class="meme" v-bind:src="card.image">
<div class="interactive"> <h2>Кто скинул этот мем?</h2>
<transition name="fade-answers"> <div class="interactive">
<List v-if="selectedAnswer === null" <transition name="fade-answers">
:options="options" @selectedAnswer="selectAnswer" /> <List v-if="selectedAnswer === null"
</transition> :options="options" @selectedAnswer="selectAnswer" />
<transition name="spin-result"> </transition>
<Result v-if="showResult" <transition name="spin-result">
:name="card.name" :selectedName="selectedAnswer" :date="card.date" :correct="correctAnswer" /> <Result v-if="showResult"
</transition> :name="card.name" :selectedName="selectedAnswer" :date="card.date" :correct="correctAnswer" />
</transition>
</div>
</div> </div>
<square-loader v-else :color="'#f3f3f3'" class="loader" />
</div> </div>
<square-loader v-else :color="'#f3f3f3'" class="loader" />
</template> </template>
<script> <script>
@@ -34,6 +36,7 @@ export default {
return { return {
options: null, options: null,
card: null, card: null,
oldCard: null,
correctAnswer: null, // True or False correctAnswer: null, // True or False
selectedAnswer: null, // Чье-то имя selectedAnswer: null, // Чье-то имя
showResult: false showResult: false
@@ -48,7 +51,7 @@ export default {
.get(process.env.VUE_APP_BACKEND + '/card') .get(process.env.VUE_APP_BACKEND + '/card')
.then(response => { .then(response => {
this.card = response.data this.card = response.data
}) })
}, },
nextCard: function() { nextCard: function() {
if (this.showResult) { if (this.showResult) {
@@ -62,7 +65,8 @@ export default {
let innerThis = this let innerThis = this
setTimeout(function() { setTimeout(function() {
innerThis.showResult = true innerThis.showResult = true
}, 800) }, 805)
this.oldCard = this.card
axios axios
.post(process.env.VUE_APP_BACKEND + '/answer', { .post(process.env.VUE_APP_BACKEND + '/answer', {
'data': { 'data': {