I have a state tree like this
state-A
state-A.A1
state-A.A2
state-B
state-B.B1
state-B.B2
Now I have a ui-sref link in state-A.A2 which loads state-B.B2. While this works correctly the UI elements from state-A.A2 stays on the screen for a few seconds and then it is removed causing the screen to flicker.
Any hint that can address the problem is much appreciated
Related
TL;DR: In a Laravel + InertiaJS + Vue 3 developed application, how can I achieve to have a transition between "pages" loaded within a persistent layout <main> section - for example, have that section animate (say, fade out) before loading the next page, then animate (fade) that new page in - when using standard Inertia routing for navigation? I have managed to do it on entering/showing the page, but have found no way to animate before navigation happens.
LONG(ish): The Way I'm trying to do it
Let's assume there is an application (developed with Laravel + InertiaJS + Vue 3).
I have an element in the markup of an Inertia persistent layout that is conditionally shown if a value is true (v-if="shouldAnimate") that is initially set to false when declared, and when onMounted fires, it sets that value to true which in turn triggers the animation to run (doesn't really matter how the animation works, but just in case, I have options to use either GSAP or anime.js).
Up to this point, all is good: every time I navigate to a page (using Inertia-adequate methods such as the Link component) the animation triggers and I am a happy guy.
BUT: I would very much like to be able to play another animation (the reverse of the previous one) before, say, navigation to the next page occurs. I have tried almost everything I can think of and have not been successful. Here's what got the closest to what I need:
I tried hooking into the InertiaJS event Inertia.on('before', ...): effectively, the event fires up right before navigation (checked with some good-old console log), so I tried firing up the animation at this point, only to find out that the Inertia event looks like it is destroying the page immediately before the animation has had time to play; no problem: I'll just event.preventDefault() it, run the animation and THEN, using a setTimeout timed to the length of the animation (300ms) I'll resume navigation, say, by using Inertia.visit.
Doesn't work. Somehow, the default behaviour is prevented (stops the navigation), the animation plays back, but when it comes to the "resume navigation part" I have had mixed results depending on what I use:
Code looks roughly like this:
let removeListener = Inertia.on('before', (event) => {
event.preventDefault()
// Play animation here
setTimeout(() => {
// SOME INERTIA ACTION DESCRIBED BELOW
}, 300)
})
Independently of whether I use Inertia.get(event.detail.visit.url) or Inertia.visit(event.detail.visit.url) what happens is the animation runs its course, and then the timer runs out and this whole code RUNS AGAIN AND AGAIN in intervals equal to the timer. I also tried to do this using the complete event of the animation to trigger the navigation but it behaves the same.
I know this is related to me being an ignorant about how both Inertia and events work, and I am sure there is a proper (correct? right?) way to achieve what I need, but either I have failed in using the correct terms to look for it, or I am approaching this the wrong way. Hopefully this information is enough to explain my issue.
Any help or pointer would be GREATLY appreciated, so thanks in advance.
I have a grid in ExtJS 6.0.2 that can be set to auto-refresh (it reloads once every ~10 seconds), but when it does, I want it to stay where it is instead of scrolling to the top each time. We have successfully used preserveScrollOnRefresh to do this with other grids, but for one particular grid, it's not working. In order to try to get it working, I decided to try calling getScrollY() before reloading the store and setScrollY() after, but that didn't work either. When I stepped through with the debugger, for some reason, getScrollY() returned 0 even when I had the grid scrolled all the way to the bottom.
Is there anything else that I can try?
it sounds like this is working for other grids in your app, so without seeing any code I'd suggest that something with that store/grid ecosystem is not configured the same as other grids in your app.
perhaps post a fiddle (fiddle.sencha.com) with an example, that may also help you find your answer if the fiddle works.
Every time I render a new view it seems to have a default fade in animation where the opacity goes from 0 - 1 over about 200 milliseconds. Is there any way to turn this off so the view appears immediately?
Sample code that would trigger the default animation;
{(() => {
if (itemIsOpen) {
return (
<CardOverlay />
)
}
})()}
CardOverlay component fades in when I want it to immediately appear.
I've been struggling with the same thing for a while now, it's been driving me around the bend but I've finally found the cause of it. Not sure if it's the same thing that caused your problem (and not sure if it's still relevant for you) but I thought I'd share it incase someone runs into the same problem.
My issue was caused by Animated.spring() -- I was using it on a sub-component (a little button that makes an image appear on the page) but it seems that as soon as you add spring anywhere in your visual tree it affects everything. Even if you put it in componentDidMount on the inner component it still affects the page-load animation for me.
Time to learn a bit more about how the react Animated library works methinks!
I have a Navigation.swf where i am loading multiple swfs using switch case statement based on the user choice (like a website navigation) aboutus.swf and contactus.swf etc, its loading perfectly.
Now in the child SWF's i have close_btn to unload the loaded SWF itself when user clicks on it. but i am not able to make it working. i have been reading help/articles form 2-3 months and found that it can be done using Event Dispatcher but somehow the codes i tried did not works for the close_btn. or it could not communicate to my main movie.
or do i need to load child swfs as movieclip ? to make the event dispatcher work from child swf so it can trigger the unloader function in main SWF and unload the loaded swf ?
please can u show me a code that can work
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
i have found a temporary solution to this
but its worthless when my content position differ.
i have made a close button and hidden it on main( navigation movie) and when child swf is loaded i have made the close button visible, it works fine but button comes at a FIXED location on stage so the problem is if my content's postion is not near the close button then close button looks ODD on stage...so i have to have the close button inside the child SWF and not on the Main movie...
please see http://www.indianstitchers.com/ and click on facility to see how ODD the close button looks.
It's hard to help you without code samples. However I would recommend you to use LoaderMax which will make loading and unloading external media a piece of cake:
http://www.greensock.com/loadermax/
Hope that helps!
In the mean time you may try that:
in your main swif:
childSwif.addEventListener("closeChild", onChildClose);
function onChildClose(event:Event):void
{
removeChild(childSwif);
childSwif.unloadAndStop();
// or watever you need to do to close it
}
in your child swif:
dispatchEvent("closeChild");
Ok so this bug is very weird
here is my code, you can actually see this bug happening using fiddler
http://jsfiddle.net/LLMUX/13/
the code works fine as long as you don't go to a different tab. the code is a rotator. if you hover the links it will show the block the hover is assigned, then once you hover off it will resume the main rotation
produce the bug
- have the fiddler page open, you could copy the code into a file and try it, same thing happens
- with the fiddler page you can hover or whatever you want or do nothing
- open another tab, do whatever for a few seconds 5-10 should do
- go back to the fiddler page
- chances are you will see 2 blocks showing then eventually 1 goes away
this only happens if you are coming back from a different tab, if you stay on the page this will NEVER happen. I tried is safari, it did not happen I tried it on IE9 it did not happen! I tried this on FF 7 and 8, both with this problem.
If anyone have any idea on why this happens it would be greatly appreciated
Edit - might not happen 100% of the time
I bet your problem is the same as this: Jquery setInterval too fast when coming from another tab
Browsers try to minimize the performance hit of web pages being active when the user doesn't interact with them. One such optimization is setTimeout/setInterval "clamping": Firefox 5+ doesn't fire timeouts faster than once in 1s.
I see that your code only uses a 1300ms interval, but I guess jQuery's animation deals with being in background in a different way than your setInterval-based code does, but I'm not up to debugging this to know the exact reason it works like that.
See also Background Tab Animation and jQuery
(edit) and if I'm right, the way I'd try fixing it is to stop using setInterval to drive animation and instead to always use the jQuery's 'finished' callbacks to schedule the next slide via setTimeout: fadeIn --> wait 1s --> fade out --> fade in.