Vue3 过渡路线 V-SLOT 在组件内部有另一个绑定文本的过渡，但这个不起作用

Question

我有这个代码。在 app.vue 中，我使用路由 V-Slot 转换来很好地更改我的组件。但是我也想在这个信息组件中使用转换——我想在 div 中平滑地传输绑定文本 {{currentQUestion }}。但我不知道，为什么这不起作用......我处于死胡同。我是 Vue.js 的新手。

<template>
  <div class="content">
    <div class="aboutus">
        <h1>About</h1>
      <div class="box">
        <div class="numbers">
          <div class="circle">1</div>
        </div>
        <<transition name="trans" mode="out-in" appear :key="currentQuestion">
        <div class="text">
          <span>{{currentQuestion}}</span>
          <p></p>
        </div>
      </transition>
      </div>
      <button @click="nextQuestion" class="next">NEXT</button>
  </div>
</div>
</template>

<script>
import users from '/src/about.json'
import { ref, computed } from 'vue';

export default {
  name: "Info",
  setup() {
    const test = ref(users);
    const countQuestions = ref(0);
    const currentQuestion = computed(() => test.value[countQuestions.value].question);

    function nextQuestion() {
      if (countQuestions.value < test.value.length - 1) {
        countQuestions.value++;
      } else {
        countQuestions.value = 0;
      }
    }

    return { test, nextQuestion, currentQuestion };
  }
}
</script>

<style lang="scss">
.trans-enter-active,
.trans-leave-active {
  transition: all 2s ease;
}

.trans-enter,
.trans-leave-to {
  opacity: 0;
}

.next {
  width: 10em;
  background: red;
}

.content {
  font-size: 1em;
  z-index: 100;
  margin: 0 54em;
  width: 60%;
  display: flex;
}

.aboutus {
  height: 20em;
  display: flex;
  flex-wrap: inherit;
  flex-direction: column;
  flex: 1;
  align-content: center;
  justify-content: center;
  color: white;
  font-size: 2em;
}

.circle {
  color: white;
  border-radius: 50%;
  width: 68px;
  height: 68px;
  padding: 14px;
  border: 3px solid #fdfdfd;
  color: #fff;
  text-align: center;
  font: 32px Arial, sans-serif;
}

.box {
  margin-top: 5em;
  display: flex;
  justify-content: space-around;
}

.text {
  width: 50%;
}
</style>

我试图改变过渡的位置，很多事情，但我可能缺少一些基本的想法为什么它不起作用..谢谢

Answer 1

尝试使用

.trans-enter-from

而不是

.trans-enter

:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup() {
    const users = ref([{question: 'aaa'}, {question: 'bbb'}])
    const test = ref(users);
    const countQuestions = ref(0);
    const currentQuestion = computed(() => test.value[countQuestions.value].question);

    function nextQuestion() {
      if (countQuestions.value < test.value.length - 1) {
        countQuestions.value++;
      } else {
        countQuestions.value = 0;
      }
    }

    return { test, nextQuestion, currentQuestion };
  }
})
app.mount('#demo')

.trans-enter-active,
.trans-leave-active {
  transition: all 2s ease;
}

.trans-enter-from,
.trans-leave-to {
  opacity: 0;
}

.next {
  width: 10em;
  background: red;
}

.content {
  font-size: 1em;
  z-index: 100;
  margin: 0 5em;
  width: 60%;
  display: flex;
}

.aboutus {
  height: 3em;
  display: flex;
  flex-wrap: inherit;
  flex-direction: column;
  flex: 1;
  align-content: center;
  justify-content: center;
  color: black;
  font-size: 2em;
}

.circle {
  color: white;
  border-radius: 50%;
  width: 68px;
  height: 68px;
  padding: 14px;
  border: 3px solid #fdfdfd;
  color: #fff;
  text-align: center;
  font: 32px Arial, sans-serif;
}

.box {
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
}

.text {
  width: 50%;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="content">
    <div class="aboutus">
        <h1>About</h1>
      <div class="box">
        <div class="numbers">
          <div class="circle">1</div>
        </div>
        <transition name="trans" mode="out-in" appear :key="currentQuestion">
        <div class="text">
          <span>{{currentQuestion}}</span>
          <p></p>
        </div>
      </transition>
      </div>
      <button @click="nextQuestion" class="next">NEXT</button>
  </div>
</div>
</div>