- 前端开发
- vue翻页过渡效果
watch: {
//使用watch 监听$router的变化
$route(to, from) {
console.log(to.meta.index);
//如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态
if (to.meta.index > 0) {
if (to.meta.index < from.meta.index) {
this.transition = "slide-right";
} else {
this.transition = "slide-left";
}
} else if (to.meta.index == 0 && from.meta.index > 0) {
this.transition = "slide-right";
}
}
}
