vue-router切换页面如何根据不同的场景设定不同的动画,比如根据前进和后退设定不同的动画
目前我的思路只能设定一种动画,比如前进(跳转)的动画,如下:
路由:
<router-view transition="back" keep-alive></router-view>
样式:
.back-transition {
transition: transform .5s ease;
}
.back-enter{
transform: translate(100%,0);
}
.back-leave {
transform: translate(-100%,0);
}
这样的话,后退和跳转页面 始终都是同一种动画。
我需要的是,不同的跳转(主要就是区分前进和后退),可以设定不同的动画。最终效果是ios app 的切换动画。
应该怎么做?
有一个库叫animate.css,官网有介绍:
然后可以做出这样的效果:jsFiddle
代码可以这么写:
我觉得比较符合你的需求
补充:
我终于明白你的问题了,其实你需要的不是绑定两种动画(坦白讲这个命题有点怪)。你需要的时候动态根据现状来使用不同的动画:
如上如文档所示,你只要有个修正机制,能够动态的根据现状(到底是前进,还是后端),给
transitionName
换不同的动画class
就好了