在 flex 行中保持同级元素的水平和垂直定位

Question

我在导航栏上一行中有 5 个 svg。 当一个图标被点击时，它会变成更大的版本，但是当这个变化发生时，所有的兄弟姐妹都会垂直移动。

有没有办法阻止这种情况发生？ 一种让周围的 flex 元素保持其精确的垂直和水平定位的方法？

代码和盒子： https ://codesandbox.io/s/bubble-bar-v3-o3272 ? file =/ src/components/BubbleBar.vue

泡泡吧.vue

<template>
  <div class="bubble-bar">
    <svg
      ref="bar"
      class="_bar"
      width="672"
      height="100"
      viewBox="0 0 672 81"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M404.3 24.0003C373.5 19 363.5 0 333.5 0C303.5 0 291.001 18.5 265.609 24.0003C254.501 25.5003 192.187 23.2827 0 24.6007V80.5H672V24.6007L404.5 24.0003Z"
        fill="#D2CBFF"
      />
    </svg>

    <div class="_navbar">
      <div class="_icons">
        <transition name="fade" mode="out-in">
          <div v-if="jobsShow" key="one" @click="jobsClicked">
            <img src="/jobs-active.svg" class="_svg" />
          </div>
          <div v-else key="two" @click="jobsClicked">
            <img src="/jobs.svg" class="_svg _jobs" />
          </div>
        </transition>
        <transition name="fade" mode="out-in">
          <div v-if="trendsShow" key="one" @click="trendsClicked">
            <img src="/trends-active.svg" class="_svg" />
          </div>
          <div v-else key="two" @click="trendsClicked">
            <img src="/trends.svg" class="_svg _trends" />
          </div>
        </transition>
        <transition name="fade" mode="out-in">
          <div v-if="castShow" key="one" @click="castClicked">
            <img src="/cast-active.svg" class="_svg" />
          </div>
          <div v-else key="two" @click="castClicked">
            <img src="/cast.svg" class="_svg _cast" />
          </div>
        </transition>
        <transition name="fade" mode="out-in">
          <div v-if="messagesShow" key="one" @click="messagesClicked">
            <img src="/messages-active.svg" class="_svg" />
          </div>
          <div v-else key="two" @click="messagesClicked">
            <img src="/messages.svg" class="_svg _messages" />
          </div>
        </transition>
        <transition name="fade" mode="out-in">
          <div v-if="profileShow" key="one" @click="profileClicked">
            <img src="/profile-active.svg" class="_svg" />
          </div>
          <div v-else key="two" @click="profileClicked">
            <img src="/profile.svg" class="_svg _profile" />
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BubbleBar",
  data() {
    return {
      jobsActive: true,
      trendsActive: false,
      castActive: false,
      messagesActive: false,
      profileActive: false,
      jobsShow: true,
      trendsShow: false,
      castShow: false,
      messagesShow: false,
      profileShow: false,
    };
  },
  mounted() {},
  methods: {
    jobsClicked() {
      this.jobsShow = true;
      this.trendsShow = false;
      this.castShow = false;
      this.messagesShow = false;
      this.profileShow = false;
      this.$refs.bar.style.transform = "translateX(-6px)";
    },
    trendsClicked() {
      this.jobsShow = false;
      this.trendsShow = true;
      this.castShow = false;
      this.messagesShow = false;
      this.profileShow = false;
      this.$refs.bar.style.transform = "translateX(72px)";
    },
    castClicked() {
      this.jobsShow = false;
      this.trendsShow = false;
      this.castShow = true;
      this.messagesShow = false;
      this.profileShow = false;
      this.$refs.bar.style.transform = "translateX(144px)";
    },
    messagesClicked() {
      this.jobsShow = false;
      this.trendsShow = false;
      this.castShow = false;
      this.messagesShow = true;
      this.profileShow = false;
      this.$refs.bar.style.transform = "translateX(218px)";
    },
    profileClicked() {
      this.jobsShow = false;
      this.trendsShow = false;
      this.castShow = false;
      this.messagesShow = false;
      this.profileShow = true;
      this.$refs.bar.style.transform = "translateX(292px)";
    },
  },
};
</script>

<style lang="sass" scoped>
.bubble-bar
  display: flex
  align-items: flex-end
  position: relative
  width: 375px
  height: 600px
  border: solid 5px black
  overflow: hidden
._bar
  position: absolute
  bottom: -10px
  left: -294px
  z-index: 1
._navbar
  width: 100%
  bottom: 5px
  position: absolute
  z-index: 2
._icons
  display: flex
  justify-content: space-around
  align-items: center

._icons>*
  flex: 1

  ._svg
    cursor: pointer

  ._jobs,
  ._trends,
  ._cast,
  ._messages,
  ._profile
    margin-top: 20px

.fade-enter-active, .fade-leave-active
  transition: opacity .25s

.fade-enter, .fade-leave-to
  opacity: 0
</style>

Answer 1

您的较大图标不会在过渡之间呈现。 您可以向_icons类添加一个添加设置的高度。

._icons
  display: flex
  justify-content: space-around
  align-items: center
  min-height: 65px