Vue.js 转换 - 进入和离开,取决于 increment/decrementing 值
Vue.js Transitions - enter and leave, dependent on increment/decrementing value
我目前有以下过渡块组件:
<div
v-if="!surveyResultIsReady"
class="vh-md-40 position-relative"
>
<transition
name="custom-classes-transition"
enter-active-class="animated slideInRight"
leave-active-class="animated slideOutLeft"
>
<div
v-bind:key="step"
class="w-100 position-absolute mx-auto"
>
<SurveyActiveQuestion
v-if="!surveyResultIsReady"
v-bind:question="activeQuestion()"
v-bind:totalQuestions="totalQuestions"
v-on:activeQuestionAnswered="activeQuestionAnswered()"
/>
</div>
</transition>
</div>
过渡由 this.step
值 (v-bind:key="step"
) 控制。
this.step++
时过渡看起来很棒,过渡在 "correct" 方向滑动:从左向右滑动。但是,当 this.step--
时,转换是相同的。
我想知道,我该如何更正此问题以向 this.step--
方向从右向左滑动?
您需要两个不同的 CSS 进入过渡状态,因为您要从两个方向滑入。使用 enter-class
的绑定(与 enter-active-class
不同),您可以将幻灯片定位隔离为 2 个单独的 CSS 输入 classes 并根据step
。例如,这里是新绑定:
:enter-class="enterClass"
enterClass
是一个数据 属性 设置为递增或递减的 class 名称字符串,使用 step
上的 watch
:
watch: {
step(old, value) {
this.enterClass = value > old ? 'slide-in-right' : 'slide-in-left';
}
}
这里是 classes:
.animated {
transition: transform .5s;
}
.slide-in-left {
transform: translate(-100%, 0);
}
.slide-in-right {
transform: translate(100%, 0);
}
演示
综上所述,这是您的代码的简化版本:
new Vue({
el: "#app",
data() {
return {
step: 1,
enterClass: ''
}
},
watch: {
step(value, old) {
this.enterClass = value > old ? 'slide-in-left' : 'slide-in-right';
}
}
});
[v-cloak] {
display:none;
}
#app {
background: #fff;
border-radius: 4px;
}
.slider {
position: relative;
overflow-x: hidden;
border: 1px solid #cccccc;
border-radius: 3px;
height: 40px;
margin-bottom: 4px;
}
.slider > div {
position: absolute;
width: 100%;
text-align: center;
}
.animated {
transition: transform .5s;
}
.slide-in-left {
transform: translate(-100%, 0);
}
.slide-in-right {
transform: translate(100%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
<div class="slider">
<transition name="slide"
enter-active-class="animated"
:enter-class="enterClass"
>
<div :key="step">
Content <br />
{{ step }}
</div>
</transition>
</div>
<button @click="--step">-</button>
<button @click="++step">+</button>
</div>
如果你想让它更漂亮,你可以用同样的方法添加leave-class
您可以使用 GSAP。我在视频里看到了(link有时间)https://youtu.be/14yOawLavB0?t=734
有代码示例(您可以根据自己的步骤轻松使用它)和结果。
我目前有以下过渡块组件:
<div
v-if="!surveyResultIsReady"
class="vh-md-40 position-relative"
>
<transition
name="custom-classes-transition"
enter-active-class="animated slideInRight"
leave-active-class="animated slideOutLeft"
>
<div
v-bind:key="step"
class="w-100 position-absolute mx-auto"
>
<SurveyActiveQuestion
v-if="!surveyResultIsReady"
v-bind:question="activeQuestion()"
v-bind:totalQuestions="totalQuestions"
v-on:activeQuestionAnswered="activeQuestionAnswered()"
/>
</div>
</transition>
</div>
过渡由 this.step
值 (v-bind:key="step"
) 控制。
this.step++
时过渡看起来很棒,过渡在 "correct" 方向滑动:从左向右滑动。但是,当 this.step--
时,转换是相同的。
我想知道,我该如何更正此问题以向 this.step--
方向从右向左滑动?
您需要两个不同的 CSS 进入过渡状态,因为您要从两个方向滑入。使用 enter-class
的绑定(与 enter-active-class
不同),您可以将幻灯片定位隔离为 2 个单独的 CSS 输入 classes 并根据step
。例如,这里是新绑定:
:enter-class="enterClass"
enterClass
是一个数据 属性 设置为递增或递减的 class 名称字符串,使用 step
上的 watch
:
watch: {
step(old, value) {
this.enterClass = value > old ? 'slide-in-right' : 'slide-in-left';
}
}
这里是 classes:
.animated {
transition: transform .5s;
}
.slide-in-left {
transform: translate(-100%, 0);
}
.slide-in-right {
transform: translate(100%, 0);
}
演示 综上所述,这是您的代码的简化版本:
new Vue({
el: "#app",
data() {
return {
step: 1,
enterClass: ''
}
},
watch: {
step(value, old) {
this.enterClass = value > old ? 'slide-in-left' : 'slide-in-right';
}
}
});
[v-cloak] {
display:none;
}
#app {
background: #fff;
border-radius: 4px;
}
.slider {
position: relative;
overflow-x: hidden;
border: 1px solid #cccccc;
border-radius: 3px;
height: 40px;
margin-bottom: 4px;
}
.slider > div {
position: absolute;
width: 100%;
text-align: center;
}
.animated {
transition: transform .5s;
}
.slide-in-left {
transform: translate(-100%, 0);
}
.slide-in-right {
transform: translate(100%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
<div class="slider">
<transition name="slide"
enter-active-class="animated"
:enter-class="enterClass"
>
<div :key="step">
Content <br />
{{ step }}
</div>
</transition>
</div>
<button @click="--step">-</button>
<button @click="++step">+</button>
</div>
如果你想让它更漂亮,你可以用同样的方法添加leave-class
您可以使用 GSAP。我在视频里看到了(link有时间)https://youtu.be/14yOawLavB0?t=734 有代码示例(您可以根据自己的步骤轻松使用它)和结果。