I'm following the example in the HTML Samples project for child routers / nested views. Instead of having a sidebar to navigate, I'm using tabs.
When I click from one tab to the next, the router updates along with the view/viewmodel - composition completes without a hitch.
The transition from the current view to the new view is jumpy though - the view fades in at the top of the page, and then jumps down to where it should be once the transition completes.
Why would this be happening?
I recently had a similar problem, mainly in older versions of IE. We had upgraded to durandal 2.1 and noticed that child router transitions that worked perfectly under durandal 2.01 were not working properly. The content faded in at the top before being repositioned to the correct location when the transition completed. We compared the 2.1 and 2.01 versions of the entrance transition and noticed some changes in the CSS it used as well as some code to detect IE. As we were under severe time constraints we rolled back the transition to the 2.01 version. This worked perfectly. Hope it helps.
Related
I've recently upgraded to react-navigation v6 for various functionality upgrades but seem to be having some difficulty understanding the recently added presentation prop available on stack navigators.
I'm working exclusively for IOS and what I basically want to achieve is the same drag-to-close behaviour presentation="modal" gives by default but without the asthetic look of the new screen being stacked on top of the previous screen.
I've made a basic example to highlight what it is I mean which will hopefully make more sense than my words.
If you set presentation to modal inside the Routes.js (line 56), on button click the modal will render and the user is able to drag down on the screen to close it. If however I use presention="transparentModal", you lose the dragging functionality.
Is it possible to get this dragging functionality when using this presentation type?
EDIT
Link to minimal example: https://snack.expo.dev/BpTJ1Cu9m
I've used keyframes to animate the entrance of some elements onto my page, however the elements are located at the bottom of the page, so the animation takes place before you see them.
Is there a way to stop the animation from happening until the user scrolls into view of the elements? Preferably not a jQuery solution since I am not familiar with it.
Note: I know there is a library called wow.js that solves this issue, but it uses animate.css for it's animations. This is a problem for me because I was using animate.css originally but it was overwriting/conflicting with some other css I had. That is why I switched to using keyframes for the animations, and in order to have all the properties of elements working correctly I believe I have to stay with keyframes rather than animate.css
I found my own answer! Wow.js still works because you don't have to necessarily use animate.css animations, you can still use your own custom animations.
This property available on the ScrollViewProps or components that derive props from it (SectionList, FlatList, VirtualizedList) is bugging me ever since I met the docs the first time.
The description only says Enables nested scrolling for Android API level 21+. but does not give more insight on what is actually wrong on API 21+ (or on API < 21 for that matter) or the actual use cases where you would need this property.
I have done multiple tests on real android devices, and on all of them, nested scrolls (either with ScrollView or the other stock components) worked properly - with or without this prop set to true - and in both horizontal and vertical directions.
So then, what does this prop actually do? Can you provide an example where this prop does anything useful or where the scroll does not work properly without it?
Also, does it harm if I just set it to true no matter what for all of these scrolling components ?
By accord with Android's website
NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
Wich means:
NestedScrollView is when you need a scrollView inside another scrollView
This is enable by default on newer versions of android, and all IOS versions, but you can set this to true and it will works on everything.
Example use:
Working on a car dealership site and playing with vue router.
The issue currently is that I have a homepage with a grid of vehicle, when clicking to view one on its own page I have to wait for the random parts to load in ,which causes page height jumps etc.
Is there a way I can trigger the view to load a method but only change the route and view when I say to (api has returned a response)?
On YouTube for example, you click a link and get the progress bar before the view changes.
Thanks.
The issue with your page height jump could be resolved by this.
As for pre-loading the data, you can use the beforeRouteEnter() function, here.
I recently retrofitted bootstrap 3 carousels to my site and added swipe gesture support using jquery mobile swiperight and swipeleft. Like this:
How to make Bootstrap carousel slider use mobile left/right swipe
This works fine, however, the functionality isn't quite what I needed.
Previously I was using swipe.js which provided more of a drag and swipe mechanic. If you place your finger on the image in the carousel and then drag it left or right the image follows the movement instantly. This feels more natural and responsive than the jquery mobile swipe implementation.
I like using bootstrap carousel and swipe.js seems to be more than just a gesture library, it really provides some carousel functionality, so combining the two doesn't seem like an easy fit.
Is anyone aware of a plugin or an appropriate that brings swipe.js like functionality to bootstrap carousel?
I was looking for a solution to this problem recently and settled on this plugin: http://ixisio.github.io/bootstrap-touch-carousel/
It's relatively light weight and is written specifically for bootstrap. The only downside is that it requires hammer.js which adds some extra weight, but this isn't a big deal.