Comments (9)
How about this feature now ?
from vue-router.
Until this get's an official solution, the method I've settled for is setting a "depth" meta property for each route. Then when the route changes, check whether the new route depth is higher or lower than the previous. If it's higher, transition from right, if it's lower (going back) transition from left.
Not ideal and could be a nightmare to maintain, but get's the job done for simple implementations.
{
name: 'categories',
path: '/categories',
component: categories,
meta: { depth: 1 },
},
{
name: 'category',
path: '/categories/:category/',
component: category,
meta: { depth: 2 },
}
<transition :name="transitionDirection">
<router-view></router-view>
</transition>
data() {
return {
transitionDirection: 'slide-left',
}
},
watch: {
'$route' (to, from) {
const toDepth = to.meta.depth
const fromDepth = from.meta.depth
this.transitionDirection = toDepth < fromDepth ? 'slide-right' : 'slide-left';
}
}
.slide-left-enter,
.slide-right-leave-active {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
.slide-right-enter,
.slide-left-leave-active {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
Or, if it's a super simple application, rather than set the depth manually, you can rely on the "depth" of the route path. app/categories
< app/categories/:category
< app/categories/:category/:post
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionDirection = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
from vue-router.
Transitions are extremely clumsy when using the swipe back gesture on iOS because they fire after the user has already reached the destination.
Being able to disable transitions when a forward/back button or browser gesture is used would be very helpful.
from vue-router.
Does this mean we can have transitions that go back and forth between pages in a single page app?
I would be happy to see that. Maybe we could eventually get to do something like this?
http://www.appcoda.com/wp-content/uploads/2015/03/vid08.gif
from vue-router.
+1
I would love a way to specify to vue-router that transitions has to be done in reverse order
from vue-router.
Is there any updated?
from vue-router.
Transitions are extremely clumsy when using the swipe back gesture on iOS because they fire after the user has already reached the destination.
Being able to disable transitions when a forward/back button or browser gesture is used would be very helpful.
Have you found a work-around? I'm really struggling with transitions and swipe back gestures on iOS.
from vue-router.
Have you found a work-around? I'm really struggling with transitions and swipe back gestures on iOS.
I never found a workaround, just this issue
from vue-router.
Closing in favor of #3453 which would effectively allow this by using $route.navigation.type
or similar
from vue-router.
Related Issues (20)
- Vue 2.7 useRouter & Storybook HOT 1
- In navigation guards, it is possible to distinguish whether push triggers navigation or replace triggers navigation?
- 后面异步append加入的script没有插入iframe的head HOT 1
- vue-router is very nice HOT 1
- npm 和yarn 安装vue-router,useRoute 数据不一致 HOT 1
- 在微前端qiankun为基座的情况下,手动修改浏览器地址栏,两个子应用间设置的createWebHashHistory base会互相叠加 HOT 3
- Use dynamic routing prompts Uncaught Error: [vue-router] "path" is required in a route configuration HOT 1
- requested module '/node_modules/.vite/deps/vue-router.js?v=85d94ed7' does not provide an export named 'default' HOT 1
- Illegal character leads to lost all query data in "history" mode
- The history.state object lost certain properties because they were overwritten by the pushState function. HOT 1
- 两层iframe嵌套,在hash模式下,第二层iframe不渲染 HOT 2
- Page refreshing after replacing the current route ( Component getting unmounted and mounted again) HOT 2
- watch router or router.currentRoute.path question HOT 2
- Canonical Path for SEO tagging? HOT 7
- 4.1.5版本以上,单个路由配置beforeEnter 无效 HOT 1
- Detect when the user changes the URL on the address bar by manually typing it HOT 1
- check path 404 HOT 1
- In Vue vite, router.push() does not render page although it does navigate to a new URL HOT 1
- The type of query is wrong and may be undefined. HOT 1
- Misfiled issue. Ignore/delete HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-router.