shaochangli/webglToy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改ui动画入场时机

Browse Source
This commit is contained in:
rucky 2022-02-11 16:42:02 +08:00
parent 48c64b858b
commit 05bd8826ad
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/page/index/Home/index.vue
View File

@ -122,7 +122,10 @@ export default {
methods: { methods: {
initShow() { initShow() {
gsap.timeline({ gsap.timeline({
delay: 2, delay: window.shownIndex ? 0 : 2,
onComplete: () => {
window.shownIndex = true;
},
}) })
.fromTo( .fromTo(
this.$refs.shadow, this.$refs.shadow,
@ -159,10 +162,10 @@ export default {
this.$Utils.btnTouched( this.$Utils.btnTouched(
event.currentTarget, event.currentTarget,
() => { () => {
// this.$router.push({ this.$router.push({
// name: item.target, name: item.target,
// params: {}, params: {},
// }); });
}, },
1.5 1.5
); );
@ -182,7 +185,7 @@ export default {
min-height: 100vh; min-height: 100vh;
background: #e3e7e8; background: #e3e7e8;
color: #333; color: #333;
overflow: hidden; // overflow: hidden;
.shader { .shader {
visibility: hidden; visibility: hidden;
@ -267,12 +270,9 @@ export default {
box-shadow: 20px 20px 60px #c4c4c4, -20px -20px 60px #ffffff; box-shadow: 20px 20px 60px #c4c4c4, -20px -20px 60px #ffffff;
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out;
&:hover {
background-position: 0 -100%;
}
} }
.iconfont { .iconfont {
font-size: 40px; font-size: 45px;
} }
.weui-grid__label { .weui-grid__label {
height: 100px; height: 100px;
@ -286,10 +286,24 @@ export default {
justify-content: center; justify-content: center;
align-content: center; align-content: center;
align-items: center; align-items: center;
transition: all 0.5s ease;
} }
&.active .weui-grid__icon { &:hover {
.weui-grid__icon {
background-position: 0 -100%; background-position: 0 -100%;
} }
.weui-grid__label {
transform: scale(1.2) translate(0, 5px);
}
}
&.active {
.weui-grid__icon {
background-position: 0 -100%;
}
.weui-grid__label {
transform: scale(1.2) translate(0, 5px);
}
}
} }
} }
.weui-grids::before, .weui-grids::before,
@ -307,7 +321,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.iconfont { .iconfont {
font-size: 30px; font-size: 40px;
} }
} }
} }