vue-router切换页面如何根据不同的场景设定不同的动画

Question

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 的切换动画。
应该怎么做？

Answer 1

有一个库叫animate.css，官网有介绍：

然后可以做出这样的效果：jsFiddle

代码可以这么写：

new Vue({
    el: '#demo',
    data: {
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    },
    transitions: {
        bounce: {
            enterClass: 'bounceInLeft',
            leaveClass: 'bounceOutRight'
        }
    }
})

我觉得比较符合你的需求

补充：

我终于明白你的问题了，其实你需要的不是绑定两种动画(坦白讲这个命题有点怪)。你需要的时候动态根据现状来使用不同的动画：

如上如文档所示，你只要有个修正机制，能够动态的根据现状（到底是前进，还是后端），给transitionName换不同的动画class就好了

Answer 2

移动端这么做性能堪忧啊，尤其是安卓版微信...