838 lines
20 KiB
Vue
838 lines
20 KiB
Vue
<template>
|
|
<b-modal class="quiz-modal" :active.sync="isQuizModal" @close="endQuiz">
|
|
<div class="card">
|
|
<div v-if="current.id" class="card-content">
|
|
<div
|
|
v-show="!isQuizShownAnswer"
|
|
class="content hover-parent"
|
|
style="cursor: pointer"
|
|
@click="addHint"
|
|
>
|
|
<div v-if="current.type === 'character'">
|
|
<div v-if="current.direction === 'ec'">
|
|
<h4>Hanzi English-Chinese</h4>
|
|
|
|
<div
|
|
v-html="
|
|
doMask((current.english || []).join(' / '), current.entry)
|
|
"
|
|
></div>
|
|
</div>
|
|
<div v-else>
|
|
<h4>Hanzi Chinese-English</h4>
|
|
<div
|
|
class="font-han text-w-normal hanzi-display"
|
|
style="text-align: center"
|
|
>
|
|
{{ current.entry }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="current.type === 'vocabulary'">
|
|
<div v-if="current.direction === 'ec'">
|
|
<h4>Vocab English-Chinese</h4>
|
|
|
|
<ul v-if="Array.isArray(current.english)">
|
|
<li
|
|
v-for="(it, i) in current.english"
|
|
:key="i"
|
|
v-html="
|
|
doMask(
|
|
it,
|
|
current.entry,
|
|
...(current.reading || []),
|
|
...(current.alt || [])
|
|
)
|
|
"
|
|
></li>
|
|
</ul>
|
|
|
|
<div
|
|
v-else
|
|
v-html="
|
|
doMask(
|
|
(current.english || []).join(' / '),
|
|
current.entry,
|
|
...(current.reading || []),
|
|
...(current.alt || [])
|
|
)
|
|
"
|
|
></div>
|
|
</div>
|
|
<div v-else>
|
|
<h4 v-if="current.direction === 'te'">
|
|
Vocabulary Traditional-English
|
|
</h4>
|
|
<h4 v-else>Vocab Simplified-English</h4>
|
|
|
|
<div class="font-zh-simp text-w-normal" style="font-size: 2rem">
|
|
{{ current.entry }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div v-if="current.direction === 'ec'">
|
|
<h4>Sentence English-Chinese</h4>
|
|
|
|
<ul>
|
|
<li v-for="(e, i) in current.english" :key="i">
|
|
{{ e }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else>
|
|
<h4>Sentence Chinese-English</h4>
|
|
|
|
<h2 class="font-zh-simp text-w-normal">
|
|
{{ current.entry }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 mb-4 hover-child">
|
|
<small>
|
|
{{ current.hint || 'Click to add hint' }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="isQuizShownAnswer" class="content">
|
|
<div v-if="current.type === 'character'">
|
|
<div
|
|
class="hanzi-display has-context font-han"
|
|
@click="openContext"
|
|
@contextmenu.prevent="openContext"
|
|
style="text-align: center"
|
|
>
|
|
{{ current.entry }}
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-bottom: 1rem">
|
|
{{ (current.reading || []).join(' | ') }}
|
|
</div>
|
|
|
|
<div style="text-align: center">
|
|
{{ (current.english || []).join(' / ') }}
|
|
</div>
|
|
|
|
<ul v-if="getSentenceByCharacter(current.entry).length">
|
|
<li
|
|
v-for="(it, i) in getSentenceByCharacter(current.entry)"
|
|
:key="i"
|
|
>
|
|
<span
|
|
class="has-context"
|
|
:title="it.reading[0]"
|
|
@click="(ev) => openContext(ev, it.entry, 'sentence')"
|
|
@contextmenu.prevent="
|
|
(ev) => openContext(ev, it.entry, 'sentence')
|
|
"
|
|
>
|
|
{{ it.entry }}
|
|
</span>
|
|
<ul>
|
|
<li v-for="(e, j) in it.english" :key="j" class="english">
|
|
{{ e }}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-else-if="current.type === 'vocabulary'">
|
|
<div
|
|
class="font-zh-simp text-w-normal has-context"
|
|
style="font-size: 2rem"
|
|
@click="openContext"
|
|
@contextmenu.prevent="openContext"
|
|
>
|
|
{{ current.simplified }}
|
|
</div>
|
|
|
|
<div
|
|
v-if="current.alt && current.alt.length"
|
|
class="font-zh-trad text-w-normal"
|
|
style="font-size: 1.7rem"
|
|
>
|
|
<span
|
|
v-for="(it, i) in current.alt"
|
|
:key="i"
|
|
class="traditional has-context"
|
|
@click="(ev) => openContext(ev, it)"
|
|
@contextmenu.prevent="(ev) => openContext(ev, it)"
|
|
>
|
|
{{ it }}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
{{ (current.reading || []).join(' | ') }}
|
|
</div>
|
|
|
|
<ul>
|
|
<li v-for="(it, i) in current.english" :key="i">
|
|
{{ it }}
|
|
</li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="current.sentences.length"
|
|
:key="dictionaryData.sentence.length"
|
|
>
|
|
<li
|
|
v-for="(it, i) in current.sentences"
|
|
:key="i"
|
|
class="sentence"
|
|
>
|
|
<span
|
|
class="has-context"
|
|
:title="dictionaryData.sentence[it].reading[0]"
|
|
@click="(ev) => openContext(ev, it, 'sentence')"
|
|
@contextmenu.prevent="(ev) => openContext(ev, it, 'sentence')"
|
|
>
|
|
{{ it }}
|
|
</span>
|
|
<ul>
|
|
<li
|
|
v-for="(e, j) in dictionaryData.sentence[it].english"
|
|
:key="j"
|
|
class="english"
|
|
>
|
|
{{ e }}
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<h2
|
|
class="font-zh-simp text-w-normal has-context"
|
|
:title="(current.reading || [])[0]"
|
|
@click="openContext"
|
|
@contextmenu.prevent="openContext"
|
|
>
|
|
{{ current.entry }}
|
|
</h2>
|
|
|
|
<ul v-if="current.english.length">
|
|
<li v-for="(it, i) in current.english" :key="i">
|
|
{{ it }}
|
|
</li>
|
|
</ul>
|
|
|
|
<ul v-if="current.vocabulary.length">
|
|
<li v-for="(it, i) in current.vocabulary" :key="i">
|
|
<span
|
|
class="has-context"
|
|
@click="(ev) => openContext(ev, it.entry, 'vocabulary')"
|
|
@contextmenu.prevent="
|
|
(ev) => openContext(ev, it.entry, 'vocabulary')
|
|
"
|
|
>
|
|
{{ it.entry }}
|
|
</span>
|
|
<span>[{{ it.reading.join(' | ') }}]</span>
|
|
<span>
|
|
{{ it.english.join(' / ') }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="has-context mt-4 mb-4" @click="addMnemonic">
|
|
<small>
|
|
{{ current.mnemonic || 'Click to add mnemonic' }}
|
|
</small>
|
|
</div>
|
|
|
|
<div v-if="current.tag && current.tag.length" class="mb-4">
|
|
Tags:
|
|
<b-taglist style="display: inline-flex">
|
|
<b-tag
|
|
v-for="t in current.tag.slice(0, 5)"
|
|
:key="t"
|
|
type="is-info"
|
|
>
|
|
{{ t }}
|
|
</b-tag>
|
|
</b-taglist>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons-area">
|
|
<div v-if="quizIndex >= quizArray.length" class="buttons">
|
|
<button
|
|
ref="btnEndQuiz"
|
|
class="button is-warning"
|
|
@click="endQuiz"
|
|
@keypress="endQuiz"
|
|
>
|
|
End quiz
|
|
</button>
|
|
</div>
|
|
<div v-else-if="!isQuizShownAnswer" class="buttons">
|
|
<button
|
|
ref="btnShowAnswer"
|
|
class="button is-warning"
|
|
@click="isQuizShownAnswer = true"
|
|
@keypress="isQuizShownAnswer = true"
|
|
>
|
|
Show answer
|
|
</button>
|
|
</div>
|
|
<div v-else class="buttons-panel">
|
|
<div class="buttons">
|
|
<button
|
|
ref="btnMarkRight"
|
|
class="button is-success"
|
|
@click="doMark('right')"
|
|
@keypress="doMark('right')"
|
|
>
|
|
Right
|
|
</button>
|
|
<button
|
|
ref="btnMarkWrong"
|
|
class="button is-danger"
|
|
@click="doMark('wrong')"
|
|
@keypress="doMark('wrong')"
|
|
>
|
|
Wrong
|
|
</button>
|
|
<button
|
|
ref="btnMarkRepeat"
|
|
class="button is-warning"
|
|
@click="doMark('repeat')"
|
|
@keypress="doMark('repeat')"
|
|
>
|
|
Repeat
|
|
</button>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<button
|
|
ref="btnHideAnswer"
|
|
class="button is-warning"
|
|
@click="isQuizShownAnswer = false"
|
|
@keypress="isQuizShownAnswer = false"
|
|
>
|
|
Hide answer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ContextMenu ref="context" :entry="ctxEntry" :type="ctxType" />
|
|
</b-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
|
|
import { api, IEntry, IQuiz } from '~/assets/api'
|
|
import { shuffle } from '~/assets/util'
|
|
import ContextMenu from '../ContextMenu.vue'
|
|
|
|
@Component({
|
|
components: {
|
|
ContextMenu,
|
|
},
|
|
})
|
|
export default class QuizCard extends Vue {
|
|
@Prop({ required: true }) quizArray!: string[]
|
|
|
|
@Ref() context!: ContextMenu
|
|
|
|
ctxEntry = ''
|
|
ctxType = ''
|
|
|
|
isQuizShownAnswer = false
|
|
isQuizModal = false
|
|
quizIndex = -1
|
|
|
|
quizData: {
|
|
[quizId: string]: IQuiz
|
|
} = {}
|
|
|
|
dictionaryData = {
|
|
character: {} as Record<string, IEntry>,
|
|
vocabulary: {} as Record<
|
|
string,
|
|
IEntry & {
|
|
sentence_set: Record<string, boolean>
|
|
}
|
|
>,
|
|
sentence: {} as Record<
|
|
string,
|
|
IEntry & {
|
|
vocabulary_set: Record<string, boolean>
|
|
}
|
|
>,
|
|
}
|
|
|
|
get current() {
|
|
const it = this.quizData[this.quizArray[this.quizIndex]!]
|
|
|
|
if (!it || !it.type || !it.entry) {
|
|
return {} as Partial<IQuiz>
|
|
}
|
|
|
|
return {
|
|
...it,
|
|
...this.dictionaryData[it.type][it.entry],
|
|
}
|
|
}
|
|
|
|
fromCharacter(c: string, type: 'vocabulary' | 'sentence') {
|
|
return shuffle(
|
|
Object.entries(this.dictionaryData[type]).filter(([entry]) =>
|
|
entry.includes(c)
|
|
)
|
|
)
|
|
.slice(0, 5)
|
|
.map(([entry, v]) => ({
|
|
...v,
|
|
entry,
|
|
}))
|
|
}
|
|
|
|
async startQuiz() {
|
|
this.quizIndex = -1
|
|
await this.initNextQuizItem()
|
|
}
|
|
|
|
endQuiz() {
|
|
this.isQuizModal = false
|
|
this.$emit('quiz:ended')
|
|
}
|
|
|
|
async doMark(type: 'right' | 'wrong' | 'repeat') {
|
|
const id = this.quizArray[this.quizIndex] as string | undefined
|
|
|
|
if (id) {
|
|
api.quiz_updateSrsLevel({
|
|
id,
|
|
df: {
|
|
right: 1,
|
|
wrong: -1,
|
|
repeat: 0,
|
|
}[type],
|
|
})
|
|
}
|
|
this.initNextQuizItem()
|
|
}
|
|
|
|
async initNextQuizItem() {
|
|
this.isQuizShownAnswer = false
|
|
|
|
Array(2)
|
|
.fill(null)
|
|
.map((_, i) => {
|
|
const front = this.checkFront(i + 1)
|
|
|
|
if (!front) {
|
|
this.cacheQuizItem({
|
|
relativePosition: i + 1,
|
|
})
|
|
}
|
|
})
|
|
|
|
if (this.quizArray[this.quizIndex + 1]) {
|
|
await this.cacheQuizItem({ relativePosition: 0 })
|
|
}
|
|
|
|
let it: IQuiz | undefined
|
|
while (true) {
|
|
it = this.quizData[this.quizArray[++this.quizIndex]!]
|
|
|
|
if (it && it.entry && it.type) {
|
|
break
|
|
}
|
|
|
|
if (this.quizIndex >= this.quizArray.length) {
|
|
break
|
|
}
|
|
}
|
|
|
|
this.isQuizModal = true
|
|
}
|
|
|
|
checkFront(relativePosition: number): boolean {
|
|
relativePosition++
|
|
const it = this.quizData[this.quizArray[this.quizIndex + relativePosition]!]
|
|
|
|
if (!it) {
|
|
return false
|
|
}
|
|
|
|
const { entry, type, direction } = it
|
|
|
|
if (!entry || !type || !direction) {
|
|
return false
|
|
}
|
|
|
|
return !!this.dictionaryData[type][entry]
|
|
}
|
|
|
|
openContext(ev: MouseEvent, entry?: string, type?: string) {
|
|
this.ctxEntry = entry || this.current.entry || ''
|
|
this.ctxType = type || this.current.type || ''
|
|
|
|
this.context.open(ev)
|
|
}
|
|
|
|
doMask(s = '', ...ws: string[]) {
|
|
ws.map((w) => {
|
|
s = s.replace(
|
|
new RegExp(
|
|
`(^| |[^a-z])(${w
|
|
.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
|
.replace(/\d/g, '\\d?')
|
|
.replace(/\s+/g, '\\s*')})($| |[^a-z])`,
|
|
'gi'
|
|
),
|
|
'$1<span class="gray-box">$2</span>$3'
|
|
)
|
|
})
|
|
|
|
return s
|
|
}
|
|
|
|
async cacheQuizItem(params: { quizId?: string; relativePosition?: number }) {
|
|
let { relativePosition = 0 } = params
|
|
relativePosition++
|
|
|
|
let { quizId } = params
|
|
quizId = quizId || this.quizArray[this.quizIndex + relativePosition]
|
|
|
|
if (!quizId) {
|
|
return
|
|
}
|
|
|
|
let q = this.quizData[quizId]
|
|
if (!q || !q.entry || !q.type || !q.direction) {
|
|
const r = await api.quiz_getById({
|
|
id: quizId,
|
|
})
|
|
|
|
if (r) {
|
|
if (q) {
|
|
Object.assign(q, r)
|
|
} else {
|
|
q = {
|
|
...r,
|
|
id: quizId,
|
|
type: r.type,
|
|
}
|
|
}
|
|
|
|
q.id = quizId
|
|
q.type = q.type
|
|
q.entry = q.entry as string
|
|
|
|
this.$set(this.quizData, quizId, q)
|
|
}
|
|
}
|
|
|
|
const type = q?.type
|
|
const entry = q?.entry
|
|
|
|
if (!entry || !type) {
|
|
return
|
|
}
|
|
|
|
if (!this.dictionaryData[type][entry]) {
|
|
const {
|
|
result: [r],
|
|
} = await api.all_getLookup({
|
|
entry,
|
|
type,
|
|
limit: 1,
|
|
forced: true,
|
|
})
|
|
|
|
this.dictionaryData[type][entry] = r!
|
|
this.$set(this.dictionaryData, type, this.dictionaryData[type])
|
|
}
|
|
|
|
if (type === 'character') {
|
|
await Promise.allSettled([
|
|
(async () => {
|
|
const subtype = 'vocabulary'
|
|
|
|
if (this.fromCharacter(entry, subtype).length < 5) {
|
|
const { result } = await api.character_getVocabulary({ entry })
|
|
result.map((r) => {
|
|
if (this.dictionaryData[subtype][r.list[0]!]) {
|
|
return
|
|
}
|
|
|
|
this.dictionaryData[subtype][r.list[0]!] = {
|
|
...r,
|
|
sentence_set: {},
|
|
}
|
|
})
|
|
|
|
this.$set(
|
|
this.dictionaryData,
|
|
subtype,
|
|
this.dictionaryData[subtype]
|
|
)
|
|
}
|
|
})(),
|
|
(async () => {
|
|
const subtype = 'sentence'
|
|
|
|
if (this.fromCharacter(entry, subtype).length < 5) {
|
|
const { result } = await api.character_getSentence({ entry })
|
|
result.map((r) => {
|
|
if (this.dictionaryData[subtype][r.list[0]!]) {
|
|
return
|
|
}
|
|
|
|
this.dictionaryData[subtype][r.list[0]!] = {
|
|
...r,
|
|
vocabulary_set: {},
|
|
}
|
|
})
|
|
|
|
this.$set(
|
|
this.dictionaryData,
|
|
subtype,
|
|
this.dictionaryData[subtype]
|
|
)
|
|
}
|
|
})(),
|
|
])
|
|
} else if (type === 'vocabulary') {
|
|
if (
|
|
Object.keys(this.dictionaryData[type][entry]!.sentence_set).length < 5
|
|
) {
|
|
const subtype = 'sentence'
|
|
|
|
const { result } = await api.vocabulary_getSentence({ entry })
|
|
result.map((r) => {
|
|
if (this.dictionaryData[subtype][r.list[0]!]) {
|
|
return
|
|
}
|
|
|
|
this.dictionaryData[subtype][r.list[0]!] = {
|
|
...r,
|
|
vocabulary_set: {},
|
|
}
|
|
})
|
|
this.dictionaryData[type][entry]!.sentence_set = result.reduce(
|
|
(prev, c) => ({
|
|
...prev,
|
|
[c.list[0]!]: true,
|
|
}),
|
|
{} as Record<string, boolean>
|
|
)
|
|
|
|
this.$set(this.dictionaryData, type, this.dictionaryData[type])
|
|
this.$set(this.dictionaryData, subtype, this.dictionaryData[subtype])
|
|
}
|
|
} else if (type === 'sentence') {
|
|
if (
|
|
!Object.keys(this.dictionaryData[type][entry]!.vocabulary_set).length
|
|
) {
|
|
const subtype = 'vocabulary'
|
|
|
|
const { result: tokens } = await api.all_tokenize({ entry })
|
|
|
|
await Promise.allSettled(
|
|
tokens.map(async (entry) => {
|
|
if (this.dictionaryData[subtype][entry]) {
|
|
return
|
|
}
|
|
|
|
const {
|
|
result: [r],
|
|
} = await api.all_getLookup({
|
|
entry,
|
|
type: subtype,
|
|
limit: 1,
|
|
forced: true,
|
|
})
|
|
|
|
this.dictionaryData[subtype][entry] = {
|
|
...r!,
|
|
sentence_set: {},
|
|
}
|
|
this.$set(
|
|
this.dictionaryData,
|
|
subtype,
|
|
this.dictionaryData[subtype]
|
|
)
|
|
})
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
addHint() {
|
|
const i = this.quizArray[this.quizIndex]
|
|
const it = this.quizData[i!]
|
|
|
|
if (!it) return
|
|
|
|
this.$buefy.dialog.prompt({
|
|
message: 'Hint',
|
|
inputAttrs: {
|
|
value: it.hint,
|
|
},
|
|
trapFocus: true,
|
|
onConfirm: async (hint) => {
|
|
await api.quiz_update({ hint, id: it.id })
|
|
it.hint = hint
|
|
this.$set(this.quizData, i!, it)
|
|
},
|
|
})
|
|
}
|
|
|
|
addMnemonic() {
|
|
const i = this.quizArray[this.quizIndex]
|
|
const it = this.quizData[i!]
|
|
|
|
if (!it) return
|
|
|
|
this.$buefy.dialog.prompt({
|
|
message: 'Mnemonic',
|
|
inputAttrs: {
|
|
value: it.mnemonic,
|
|
},
|
|
trapFocus: true,
|
|
onConfirm: async (mnemonic) => {
|
|
await api.quiz_update({ mnemonic, id: it.id })
|
|
it.mnemonic = mnemonic
|
|
this.$set(this.quizData, i!, it)
|
|
},
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.has-context {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: blue;
|
|
}
|
|
}
|
|
|
|
.hover-child {
|
|
display: none;
|
|
}
|
|
|
|
.hover-parent:hover .hover-child {
|
|
display: block;
|
|
}
|
|
|
|
.traditional {
|
|
& + &::before {
|
|
content: ' | ';
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.quiz-modal .modal-content {
|
|
max-width: 500px !important;
|
|
}
|
|
|
|
.quiz-modal .buttons-area {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.buttons-area .buttons {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.quiz-modal .card-content {
|
|
min-height: 7.5rem;
|
|
max-height: calc(100vh - 300px);
|
|
overflow: scroll;
|
|
padding-bottom: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: 1.5rem;
|
|
margin-right: 1.5rem;
|
|
border-bottom: 1px solid hsla(0, 0%, 50%, 0.25);
|
|
|
|
scrollbar-width: none; /* For Firefox */
|
|
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0px; /* For Chrome, Safari, and Opera */
|
|
}
|
|
}
|
|
|
|
.buttons-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.buttons-panel .buttons {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.buttons-area button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background-color: currentColor;
|
|
visibility: hidden;
|
|
z-index: 2;
|
|
}
|
|
|
|
.buttons-area button:not(:active)::before {
|
|
animation: ripple 0.4s cubic-bezier(0, 0, 0.2, 1);
|
|
transition: visibility 0.4s step-end;
|
|
}
|
|
|
|
.buttons-area button:active::before {
|
|
visibility: visible;
|
|
}
|
|
|
|
.edit-modal .card-footer {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sentence {
|
|
li.english {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover li.english {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
width: 150px;
|
|
height: 150px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|