backup/ZY-Player
1
0
Fork 0
mirror of https://github.com/cuiocean/ZY-Player.git synced 2026-05-10 08:12:08 +08:00
Code Issues Projects Releases Wiki Activity

🎉 剥离 css 动画

Browse Source
This commit is contained in:
Hunlongyu
2020-10-13 18:03:41 +08:00
parent a3db2ea2f2
commit 206a16160b
8 changed files with 207 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@@ -3,9 +3,9 @@
<Frame />
<div class="main">
<Aside />
<transition-group name="fade">
<transition>
<Film key="film" />
</transition-group>
</transition>
</div>
</div>
</template>
@@ -20,7 +20,6 @@ export default {
@import './assets/scss/theme.scss';
html, body, #app{
height: 100%;
border-radius: 10px;
overflow: hidden;
}
#app{

100
src/assets/scss/animation.scss Normal file
View File

@@ -0,0 +1,100 @@
.AniSlideRight-enter-active, .AniSlideRight-leave-active{
transition: all 0.5s ease-in-out;
}
.AniSlideRight-enter, .AniSlideRight-leave-to{
transform: translateX(50%);
opacity: 0;
}
.AniRotate-enter-active, .AniRotate-leave-active{
transition: all 0.5s ease-in-out;
}
.AniRotate-enter, .AniRotate-leave-to{
transform: rotate(-180deg);
opacity: 0;
}
.AniSlideUp-enter-active, .AniSlideUp-leave-active{
transition: all 0.5s ease-in-out;
}
.AniSlideUp-enter, .AniSlideUp-leave-to{
transform: translateY(50%);
opacity: 0;
}
@keyframes shake-bottom {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 100%;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
@keyframes shake-top {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
@keyframes shake-br {
0%,
100% {
transform: rotate(0deg);
transform-origin: 100% 100%;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}

4
src/assets/scss/theme.scss
View File

@@ -7,13 +7,15 @@
--l-c-9: #823aa099;
--l-f-1: #808695;
--l-f-2: #332f5c;
--l-bgc-1: #ffffffff;
--l-bgc-1: #ffffff;
--l-bgc-2: #f2f6f9;
--l-bsc: 0 1px 3px #8e8da233, 0 1px 2px #8e8da244;
--l-bsc-hover: 0 14px 28px #8e8da255, 0 10px 10px #8e8da244;
--l-bsc-2: 0 -4px 23px 0 #8e8da233;
--l-bsc-3: 0 0px 14px #8e8da255, 0 0px 10px #8e8da244;
--l-bsc-scroll: inset 0 0 5px #823aa000;
}
@import './theme/Light.scss';
@import './animation.scss';
@import './style.scss';

18
src/assets/scss/theme/Light.scss
View File

@@ -76,4 +76,22 @@
}
}
}
.zy-film{
box-shadow: var(--l-bsc-3);
color: var(--l-f-1);
.btn-placeholder{
box-shadow: var(--l-bsc);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover{
box-shadow: var(--l-bsc-hover);
}
}
.btn-list{
background-color: var(--l-bgc-1);
box-shadow: var(--l-bsc-hover);
li:hover{
background-color: var(--l-bgc-2);
}
}
}
}

1
src/background.js
View File

@@ -21,7 +21,6 @@ function createWindow () {
height: 720,
frame: false,
resizable: true,
transparent: true,
webPreferences: {
webSecurity: false,
enableRemoteModule: true,

4
src/components/Aside.vue
View File

@@ -56,13 +56,15 @@ export default {
align-items: center;
flex-direction: column;
justify-content: center;
-webkit-app-region: drag;
span{
width: 100%;
height: 60px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-app-region: no-drag;
&:hover, &.active{
.icon{
stroke-width: 2;

79
src/components/Film.vue
View File

@@ -1,13 +1,88 @@
<template>
<div class="zy-film">film</div>
<div class="zy-film">
<div class="header">
<div class="btn-select" @mouseleave="show.site = false">
<div class="btn-placeholder" @click="show.site = true">OK资源网</div>
<transition name="AniSlideUp">
<div class="btn-list zy-scrollbar" v-show="show.site">
<ul>
<li>OK资源网</li>
<li>最大资源网</li>
<li>卧龙资源网</li>
</ul>
</div>
</transition>
</div>
</div>
<div class="body"></div>
</div>
</template>
<script>
export default {
name: 'Film'
name: 'Film',
data () {
return {
show: {
site: false
}
}
}
}
</script>
<style lang="scss" scoped>
.zy-film{
flex: 1;
margin: 0 10px 10px 0;
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
.header{
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
.btn-select{
width: 180px;
height: 34px;
cursor: pointer;
position: relative;
font-size: 14px;
margin-left: 10px;
.btn-placeholder{
width: 180px;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.btn-list{
width: 180px;
position: absolute;
top: 34px;
left: 0;
z-index: 2;
max-height: 340px;
overflow: hidden;
&:hover{
overflow: auto;
}
ul{
margin: 0;
padding: 0;
list-style: none;
li{
height: 34px;
line-height: 34px;
padding-left: 10px;
&.active{}
}
}
}
}
}
.body{
flex: 1;
// border: 1px solid #000;
}
}
</style>

106
src/components/Frame.vue
View File

@@ -13,7 +13,7 @@
<span class="btn" @click="searchBtnClick()">
<IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
</span>
<transition name="slide">
<transition name="AniSlideRight">
<input
v-if="search"
v-model.trim="searchTxt"
@@ -23,10 +23,10 @@
@keyup.enter="searchEvent()"
type="text">
</transition>
<transition name="rotate">
<transition name="AniRotate">
<IconClose v-if="searchTxt.length > 0" class="icon icon-search-close" @click="clearSearchTxt()" />
</transition>
<transition name="slideUp">
<transition name="AniSlideUp">
<div v-if="search" class="search-box zy-scrollbar">
<ul>
<li v-for="(i, j) in searchHistoryList" :key="j" @click="searchHistoryClick(i)">{{i}}</li>
@@ -163,32 +163,6 @@ export default {
&:hover{
.icon{
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
@keyframes shake-bottom {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 100%;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
}
}
}
@@ -196,32 +170,6 @@ export default {
&:hover{
.icon{
animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
@keyframes shake-top {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
}
}
}
@@ -236,32 +184,6 @@ export default {
&:hover{
.icon{
animation: shake-br 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
@keyframes shake-br {
0%,
100% {
transform: rotate(0deg);
transform-origin: 100% 100%;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
}
}
.active{
@@ -292,6 +214,7 @@ export default {
height: auto;
max-height: 172px;
overflow-y: hidden;
z-index: 3;
&:hover{
overflow-y: auto;
}
@@ -318,27 +241,6 @@ export default {
}
}
}
.slide-enter-active, .slide-leave-active{
transition: all 0.5s ease-in-out;
}
.slide-enter, .slide-leave-to{
transform: translateX(50%);
opacity: 0;
}
.rotate-enter-active, .rotate-leave-active{
transition: all 0.5s ease-in-out;
}
.rotate-enter, .rotate-leave-to{
transform: rotate(-180deg);
opacity: 0;
}
.slideUp-enter-active, .slideUp-leave-active{
transition: all 0.5s ease-in-out;
}
.slideUp-enter, .slideUp-leave-to{
transform: translateY(50%);
opacity: 0;
}
}
}
.right{