最外层的盒子是相对定位，但是高度是零，怎么才能让外面这个盒子能有图片的高度呢？

Question

最外层的盒子是相对定位，但是高度是零，怎么才能让外面这个盒子能有图片的高度呢？

这是这个轮播图的html代码。

<template>
    <div>
      <transition-group tag='ul' :name="name" class="scroll-div">
        <li v-for="(img,index) in imgs" v-show="index === mark" :key="index">
          <a :href='img.url'>
            <img :src="img.picUrl">
          </a>
        </li>
      </transition-group>
    </div>
</template>
<script>
import axios from "axios";
import { setInterval } from "timers";
export default {
  data() {
    return {
      mark: 0,
      imgs: [],
      name:''
    };
  },
  methods: {
    getImgs() {
      axios.get("http://localhost:3000/banner").then(res => {
        console.log(res.data.banners);
        this.imgs = res.data.banners;
      });
    },
    autoplay() {
      this.mark++;
      console.log(this.mark);
      if (this.mark === 3) {
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoplay, 3000);
    }
  },
  async created() {
    await this.getImgs();
    this.name = image;
  },
  mounted() {
    this.play();
  }
};
</script>

<style lang="scss" scoped>
.scroll-div {
  width: 100%;
  position: relative;
  li {
    width: 100%;
    position: absolute;
    img {
      display: block;
      width: 100%;
    }
  }
}
.image-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}
.image-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%);
}
.image-enter {
  transform: translateX(100%);
}
.image-leave {
  transform: translateX(0);
}
</style>

imgs 这个数据是我从本地服务器取回的。

---

之前的问题是因为图片是异步加载的，teansition-group 是先加载出来的，所以出现了一段空白的内容。

Answer 1

默认的时候translateX应该是要等于0的