我有以下代码:
<template>
<div id="app">
<div class="container">
<div class="row document__box">
<div class="col-10" style="padding-left: 10px; padding-right: 10px">
<span class="document__anchor">
Lorem ipsum dolor sit amet consectetur adipisicing elit</span
>
</div>
<span
@click="show = !show"
class="open"
style="
background: #2da1a4;
right: 0;
position: absolute;
top: 0;
min-height: 100%;
border-radius: 0px 15px 15px 0px;
padding: 1px 5px;
"
>
<b-icon icon="chevron-double-left" variant="white"></b-icon>
</span>
<transition name="slide">
<p v-if="show">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum
dolor sit amet consectetur adipisicing elit
</p>
</transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function () {
return {
show: false,
};
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.document__view {
font-size: 10px;
padding: 3px 15px;
border-radius: 15px 0px;
color: #fff;
background: #2BA0A3;
right: 0;
position: absolute;
bottom: 0;
}
.document__box {
position: relative;
border-radius: 15px;
border: 1px solid #ECECEC;
margin: 15px 0px 20px;
padding: 15px 10px 15px 0;
background: #F7FCFC;
}
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
</style>
上面的代码我的幻灯片从下面滑动详细信息,我希望灰色部分与图片中显示的描述一起滑动。我什至试图把过渡放在里面,如下所示:
<span @click="show = !show" class="open" style="background: #2da1a4;right: 0;position: absolute;top:0;min-height:100%;border-radius:0px 15px 15px 0px;padding: 25px 5px">
<b-icon icon="chevron-double-left" variant="white"></b-icon>
<transition name="slide">
<p v-if="show">Share Download View</p>
</transition>
</span>
但它会展开灰色按钮并在里面显示描述。我如何通过过渡或没有过渡来实现这一目标?