Vue.js 在拖动和单击时转换

Question

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

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

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

Answer 1

您的转换包装了Calendar 组件，但它永远不会改变。仅包装组件中更改的部分。来自docs：

当项目从 DOM 中插入、更新或删除

时，Vue 提供了多种应用过渡效果的方法

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

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

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

key 属性会在月份更改时强制 div 重新渲染，以便触发转换。这是在keydocumentation 中建议的。使用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>