vue.js - 使用 vue 过渡实现像手风琴一样的幻灯片

Question

我有以下代码：

<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>

但它会展开灰色按钮并在里面显示描述。我如何通过过渡或没有过渡来实现这一目标？

标签： vue.jsvue-transitions