添加过渡动画
This commit is contained in:
zyronon
17
src/assets/css/anim.scss
Normal file
17
src/assets/css/anim.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.list-move, /* 对移动中的元素应用的过渡 */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* 确保将离开的元素从布局流中删除
|
||||
以便能够正确地计算移动的动画。 */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@import "@icon-park/vue-next/styles/index.css";
|
||||
@import "colors";
|
||||
@import "anim";
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
|
||||
@@ -42,92 +42,94 @@ async function selectDict(item: Dict) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal-root" :class="store.dictModalIsOpen ? 'show':'hide'">
|
||||
<div class="modal-mask" @click="store.dictModalIsOpen = false"></div>
|
||||
<div class="modal">
|
||||
<div class="modal-body">
|
||||
<div class="slide">
|
||||
<div class="slide-list" :class="`step${step}`">
|
||||
<div class="dict-page">
|
||||
<header>
|
||||
<div class="tabs">
|
||||
<div class="tab">
|
||||
<span>英语</span>
|
||||
<Teleport to="body">
|
||||
<div class="modal-root" :class="store.dictModalIsOpen ? 'show':'hide'">
|
||||
<div class="modal-mask" @click="store.dictModalIsOpen = false"></div>
|
||||
<div class="modal">
|
||||
<div class="modal-body">
|
||||
<div class="slide">
|
||||
<div class="slide-list" :class="`step${step}`">
|
||||
<div class="dict-page">
|
||||
<header>
|
||||
<div class="tabs">
|
||||
<div class="tab">
|
||||
<span>英语</span>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<span>日语</span>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<span>德语</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<span>日语</span>
|
||||
<close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
|
||||
:strokeWidth="2"/>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="dict-list-wrapper">
|
||||
<div class="tags">
|
||||
<div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
|
||||
</div>
|
||||
<div class="dict-list">
|
||||
<div class="dict-item"
|
||||
:class="currentSelectDict.name === i.name && 'active'" v-for="i in childrenEnglish"
|
||||
@click="selectDict(i)"
|
||||
>
|
||||
<div class="name">{{ i.name }}</div>
|
||||
<div class="desc">{{ i.description }}</div>
|
||||
<div class="num">{{ i.length }}词</div>
|
||||
<arrow-right v-if="currentSelectDict.name === i.name"
|
||||
@click.stop="step = 1"
|
||||
class="go" theme="outline" size="20" fill="#ffffff"
|
||||
:strokeWidth="2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<span>德语</span>
|
||||
</div>
|
||||
</div>
|
||||
<close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
|
||||
:strokeWidth="2"/>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="dict-list-wrapper">
|
||||
<div class="tags">
|
||||
<div class="tag" :class="i === 5 &&'active'" v-for="i in 2">六级</div>
|
||||
</div>
|
||||
<div class="dict-list">
|
||||
<div class="dict-item"
|
||||
:class="currentSelectDict.name === i.name && 'active'" v-for="i in childrenEnglish"
|
||||
@click="selectDict(i)"
|
||||
>
|
||||
<div class="name">{{ i.name }}</div>
|
||||
<div class="desc">{{ i.description }}</div>
|
||||
<div class="num">{{ i.length }}词</div>
|
||||
<arrow-right v-if="currentSelectDict.name === i.name"
|
||||
@click.stop="step = 1"
|
||||
class="go" theme="outline" size="20" fill="#ffffff"
|
||||
:strokeWidth="2"/>
|
||||
<div class="chapter-wrapper">
|
||||
<ChapterList
|
||||
class="chapter-list"
|
||||
:list="currentSelectDict.chapterList"
|
||||
v-model:active-index="currentSelectDict.chapterIndex"
|
||||
/>
|
||||
<div class="footer">
|
||||
<div class="my-button">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chapter-wrapper">
|
||||
<ChapterList
|
||||
class="chapter-list"
|
||||
:list="currentSelectDict.chapterList"
|
||||
v-model:active-index="currentSelectDict.chapterIndex"
|
||||
/>
|
||||
<div class="footer">
|
||||
<div class="my-button">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dict-detail-page">
|
||||
<header>
|
||||
<div class="left">
|
||||
<arrow-left
|
||||
@click="step = 0"
|
||||
class="go" theme="outline" size="20" fill="#ffffff"
|
||||
:strokeWidth="2"/>
|
||||
<div class="title">
|
||||
词典详情
|
||||
<div class="dict-detail-page">
|
||||
<header>
|
||||
<div class="left">
|
||||
<arrow-left
|
||||
@click="step = 0"
|
||||
class="go" theme="outline" size="20" fill="#ffffff"
|
||||
:strokeWidth="2"/>
|
||||
<div class="title">
|
||||
词典详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
|
||||
:strokeWidth="2"/>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="dict-info">
|
||||
<div class="dict-item">
|
||||
<div class="name">{{ currentSelectDict.name }}</div>
|
||||
<div class="desc">{{ currentSelectDict.description }}</div>
|
||||
<div class="num">{{ currentSelectDict.length }}词</div>
|
||||
<close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
|
||||
:strokeWidth="2"/>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="dict-info">
|
||||
<div class="dict-item">
|
||||
<div class="name">{{ currentSelectDict.name }}</div>
|
||||
<div class="desc">{{ currentSelectDict.description }}</div>
|
||||
<div class="num">{{ currentSelectDict.length }}词</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chapter-wrapper">
|
||||
<ChapterList :list="currentSelectDict.chapterList"
|
||||
v-model:active-index="currentSelectDict.chapterIndex"
|
||||
/>
|
||||
</div>
|
||||
<div class="other">
|
||||
<WordList class="word-list" :list="currentSelectChapter" :activeIndex="-1" :isActive="false"/>
|
||||
<div class="footer">
|
||||
<div class="my-button">返回</div>
|
||||
<div class="my-button">确定</div>
|
||||
<div class="chapter-wrapper">
|
||||
<ChapterList :list="currentSelectDict.chapterList"
|
||||
v-model:active-index="currentSelectDict.chapterIndex"
|
||||
/>
|
||||
</div>
|
||||
<div class="other">
|
||||
<WordList class="word-list" :list="currentSelectChapter" :activeIndex="-1" :isActive="false"/>
|
||||
<div class="footer">
|
||||
<div class="my-button">返回</div>
|
||||
<div class="my-button">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,7 +138,7 @@ async function selectDict(item: Dict) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -40,27 +40,32 @@ watch(() => props.list, () => {
|
||||
|
||||
<template>
|
||||
<div class="list" ref="listRef">
|
||||
<template v-for="(item,i) in list">
|
||||
<div class="item" @click="$emit('change',i)" :class="activeIndex === i && 'active'">
|
||||
<div class="left">
|
||||
<div class="letter">{{ item.name }}</div>
|
||||
<div class="info">
|
||||
<div class="translate">{{ item.trans.join('；') }}</div>
|
||||
<div class="phonetic">{{ item.usphone }}</div>
|
||||
<TransitionGroup name="list">
|
||||
<template v-for="(item,i) in list" :key="i">
|
||||
<div class="item" @click="$emit('change',i)" :class="activeIndex === i && 'active'">
|
||||
<div class="left">
|
||||
<div class="letter">{{ item.name }}</div>
|
||||
<div class="info">
|
||||
<div class="translate">{{ item.trans.join('；') }}</div>
|
||||
<div class="phonetic">{{ item.usphone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="audio" @click="playAudio(item.name)">播放</div>
|
||||
<div class="audio" @click="playAudio(item.name)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="audio" @click="playAudio(item.name)">播放</div>
|
||||
<div class="audio" @click="playAudio(item.name)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/assets/css/colors";
|
||||
|
||||
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -68,7 +73,8 @@ watch(() => props.list, () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 $space;
|
||||
overflow: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
|
||||
Reference in New Issue
Block a user