From a23a2c417afcf46da2f2626d4fdecddade205405 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 11 一月 2021 16:39:06 +0800
Subject: [PATCH] 优化左下角业务看板展示动画
---
src/components/LayerController/LayerController.vue | 27 +++++++++++++++++----------
1 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index 743f80c..7f2fd10 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -1,7 +1,7 @@
<template>
<div class="float-panel">
- <i class="horn horn-br"></i>
- <i class="horn horn-bl"></i>
+<!-- <i class="horn horn-br"></i>-->
+<!-- <i class="horn horn-bl"></i>-->
<div class="head title-border">
<div class="title-text-border">
<div class="title-icon"></div>
@@ -14,8 +14,13 @@
</div>
<div class="body-box" id="panelContent">
<div id="panelInnerContent" :style="{ height:height }">
- <slot></slot>
+ <transition name="el-fade-in">
+ <div v-show="isShow">
+ <slot></slot>
+ </div>
+ </transition>
</div>
+
</div>
</div>
</template>
@@ -52,6 +57,7 @@
data () {
return {
height: '200px',
+ isShow: true,
icons: {
setting: iconSetting
},
@@ -84,8 +90,10 @@
this.panelSwitch.main = !this.panelSwitch.main
if (this.panelSwitch.main) {
this.height = '200px'
+ this.isShow = true
} else {
this.height = '0px'
+ this.isShow = false
}
}
}
@@ -111,7 +119,6 @@
overflow: hidden;
transition: all 0.5s linear;
}
-
.title-border {
width: 100%;
height: 28px;
@@ -159,7 +166,7 @@
height: 22px;
margin-top: 4px;
margin-left: 2px;
- background-image: url(/assets/images/map-pages/icon/setting.png);
+ background-image: url(../../assets/images/map-pages/icon/setting.png);
}
.title-text {
@@ -222,7 +229,7 @@
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
- background-image: url(/assets/images/map-pages/icon/xljt1.png);
+ background-image: url(../../assets/images/map-pages/icon/xljt1.png);
transform: rotateX(0deg);
transform-origin: 50% 50%;
transition: transform 0.5s linear 0s;
@@ -251,25 +258,25 @@
}
.horn-tl {
- background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png) ;
left: -1px;
top: -1px;
}
.horn-tr {
- background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
right: -1px;
top: -1px;
}
.horn-bl {
- background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
left: -1px;
bottom: -1px;
}
.horn-br {
- background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
right: -1px;
bottom: -1px;
}
--
Gitblit v1.8.0