1

我正在尝试构建一个日历组件，当我单击下一个或上一个时我想要一个过渡，我也想在滑动时添加一个过渡，但是我无法使 vue 过渡工作。我只有一个元素（当前月份），点击下一步或上一个后，它所做的只是更改数据。为了能够添加动态变换：翻译，因为我需要在滑动时获取鼠标位置，我应该创建3个元素（上个月，当前月，下个月）？或者我可以让这项工作只改变数据吗？

我在 vue docs 上尝试了最简单的示例，每次单击按钮时，转换都不起作用。

 <transition name="home">
    <Calendar></Calendar>
  </transition>

.home-enter-active,
.home-leave-active {
    transition: opacity 4s;
}


.home-enter,
.home-leave-active {
    opacity: 0;
}

这是我的日历组件。

<template>
    <div id="calendar" class="calendar">
        <div>
            <div>{{ state.currentMonthName }}</div>
            <div>{{ state.currentYear }}</div>
            <div>
                <ul class="weekDays">
                    <li v-for="days in state.weekNames" :key="days">{{ days }}</li>
                </ul>
            </div>
            <div class="days">
                <span
                    @click="
                        selectDate(state.currentYear, state.currentMonth - 1, state.getLastDayOfPreviousMonth - state.startDay + day);
                        goPrev();
                    "
                    class="lastMonth"
                    v-for="day in state.startDay"
                    :key="'empty' + day"
                    >{{ state.getLastDayOfPreviousMonth - state.startDay + day }}</span
                >
                <span :class="currenDateClass(state.currentYear, state.currentMonth, day)" @click="selectDate(state.currentYear, state.currentMonth, day)" v-for="day in state.getLastDayOfMonth" :key="day">{{ day }}</span>
                <span
                    @click="
                        goNext();
                        selectDate(state.currentYear, state.currentMonth, day);
                    "
                    class="lastMonth"
                    v-for="day in 6 - state.endDay"
                    :key="'nextMonth' + day"
                    >{{ day }}</span
                >
            </div>
        </div>

        <button @click="goPrev">Prev</button>
        <button @click="goNext">Next</button>
    </div>
</template>
4

1 回答 1

1

您的过渡包装了Calendar组件，但它永远不会改变。仅包装组件中更改的部分。从文档：

当从 DOM中插入、更新或删除项目时，Vue 提供了多种应用过渡效果的方法

在他们的示例中，过渡用 包装了一个元素v-if，它从 DOM 中添加/删除项目，因此应用了过渡。围绕发生变化的内容在组件内移动过渡。例如，一个月的过渡：

<template>
  ...
  <transition name="home">
    <div :key="state.currentMonthName">{{ state.currentMonthName }}</div>
  </transition>
  ...
</template>

注意：过渡必须包裹一个元素。如果没有 div 或其他标签，这将无法工作。

当key月份发生变化时，道具会强制 div 重新呈现，以便触发转换。正如key 文档中所建议的那样。使用key，您可以包装您想要的任何内容，并且当密钥更改时它将全部重新呈现。

这是一个使用过渡 CSS 和更简单模板的演示：

Vue.component('Calendar', {
  template: `
    <div id="calendar" class="calendar">
        <div>
            <transition name="home">
                <div :key="indexMonth">{{ months[indexMonth] }}</div>
            </transition>
        </div>
 
        <button @click="goPrev">Prev</button>
        <button @click="goNext">Next</button>
    </div>
  `,
  data() {
    return {
      months: [ "January", "February", "March", "April", "May", "June",
               "July", "August", "September", "October", "November", "December" ],
      indexMonth: 0
    }
  },
  methods: {
    goPrev() {
        this.indexMonth = this.indexMonth === 0 ? this.months.length - 1 : this.indexMonth - 1;
    },
    goNext() {
        this.indexMonth = this.indexMonth === 11 ? 0 : this.indexMonth + 1;
    }
  }
})

/***** APP *****/
new Vue({
  el: "#app"
});
.home-enter-active,
.home-leave-active {
    transition: opacity 1s;
}

.home-enter,
.home-leave-active {
    opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <Calendar></Calendar>
</div>

于 2020-11-15T06:35:46.717 回答