Does anybody know whether there is a way to check for the end of an animate:flip animation in a svelte component?
I don't see any events listed for it, no transition events work for it either.
I need to run a function once the flip animation completes to measure the containing element. Because the elements are animated, running the function before the animation completes leads to wrong size. I want to avoid "hackish" solutions with timeouts, etc. because I would need to run them in some afterUpdate which may be fired by other "updates" (not necessarily by adding/removing an element in the each block which is using flip), but it seems like there is no other way. Or is there? Thanks for reading.
Related
So I have this page where on a button click, an image is added embellishments after performing various calculations on its meta-data which is stored as data-attributes.
Since the calculations can take a few seconds, I want to show an overlay on the image. So I do:
$(selectedImageId).addClass('loading');
//perform series of calculations here...
$(selectedImageId).removeClass('loading').addClass('calculated-embellishments');
I would imagine the script to first show the loading overlay on the image, then perform the lengthy calculations, then replace the overlay with the selected embellishment class. However it seems like the DOM is updated only at the end such that I never see the loading class, it just directly jumps from the plain image to the embellishment class after a few seconds.
If I add an alert('test') just before the last line which adds the embellishment then I can see the loading overlay on the image, but not otherwise.
How can I make this work the way I want it to, as I explained above?
Any pointers are very welcome!
What probably happens is that your "lengthy calculations" make the browser "hang" for processing, not having a chance to re-paint your image to reflect the newly added loading class.
Then once the calculations are done, your last instruction replaces the loading class by calculated-embellishments class, and now the browser has time to re-paint. But the loading class is already gone.
You have at least 3 workarounds to let the browser actually display your loading class before your calculations keep it busy:
Use a setTimeout as proposed by #csum, which is a bet on how much time the browser would need before doing the re-paint that will show your image with loading class. Hence the need to "test" different timeout values, but still without any guarantee as the result will depend on each client current performance (CPU, memory, current CPU load!).
Start your calculations in a callback of the "load" event of your overlay (if it is an image). But I am not sure if "load" event is a guarantee of the image (overlay) being painted (shown on screen).
Use 2 nested requestAnimationFrame to make sure at least 1 re-paint has occured, before you start your calculations.
You probably want to execute your calculations using setTimeout.
var WAIT = 10; // experiment with small values here
$(selectedImageId).addClass('loading');
setTimeout(function () {
//perform series of calculations here...
$(selectedImageId).removeClass('loading').addClass('calculated-embellishments');
}, WAIT);
If you want to play around with the timeout length, here is a jsfiddle with a demo using a similar situation: https://jsfiddle.net/v2n19w4d/1/ I find that a timeout length close to zero was not working.
This is really an issue with getting the DOM to update before it is blocked while doing your calculations. See jQuery append in loop - DOM does not update until the end, for example.
I've been using Adobe Edge Animate to create what is basically an intro to a site. But I'd really like to try to code it myself by hand. And, to that effect, I have a question.
How would I string along multiple animations based on an array?
Here's what I'm thinking:
1. The array holds the name of each image.
2. I want to animation each image across the screen, one at a time.
3. Each image will animate once the one before it is done.
I know how to use the animationEnd event. My idea is that, basically, I'll append a child to a container div, assign it a class with the animation, use animationEnd to know when it's done, and at that time I'd want to go to the next image.
But how can I loop through each image when I need to wait for animationEnd to fire? Any ideas? Does anyone know of a good tutorial that touches on this issue?
I'd appreciate any guidance! I'm not asking for you to write me much code but just explain the way I can do the looping while waiting on animationEnd. I think that's where I'm stuck in my brain.
You should use what's called a "recurring function", a function that calls itself multiple times. It usually functions a lot like a loop, but for asynchronous things (like animationEnd event), it's often the easiest way to go.
An example of usage in your case would be this:
var imgs=[/*images here*/];
function nextAnimation(curInd){
var thisImg=imgs[curInd];
//create the image element, trigger the animation, etc here
//put the img element itself into a variable named imgElt, then:
imgElt.addEventListener('animationEnd',function(){
//only call the function again if this isn't the last item in the array
if(curInd+1!=imgs.length)
nextAnimation(curInd+1);
},false);
}
nextAnimation(0);
Read it through a few times, you should understand it after a while. Also look up some other examples of recurring functions online, it's sometimes a tricky concept to master if you haven't done too much programming before
I want to know if the use of if-else inside the jQuery .scroll() to compare positions with functions like:
offset = $(window).scrollTop()
and:
nameVar = $("#divID").offset()
These comparisons also adds css styles, inside the .scroll(), I have like four if-else statements.I am trying to find out if I will get performance issues when comparing DIVs' positions.
In my first tests the page load okay, but if I leave the page open I noticed that it is getting pretty laggy.
So:
Is it a better way to use if-else inside scroll()?
Am I using if-else wrong?
Is there another way to do it right?
The issue is that .scroll() events can be called very rapidly during a scroll operation. You either need to respond to a given event very quickly OR you need to defer handling of the scroll events (usually with a timer) until the user pauses with the scroll bar and stops moving it. Either one of those behaviors will prevent the laggy behavior.
A couple if statements take almost no time. But doing heavy duty selector queries or particularly making page changes that cause relayout and repainting can take significant CPU.
There is no right or wrong description for what exactly you can and can't do in a scroll handler and not see laggy behavior because it depends upon exactly what you're doing, what computer you're running it on, how much repaint and relayout operations you might cause by your actions, etc... The best you can do is either just decide to take the deferred route so you don't make your changes live until the user pauses the scroll or you have to test your code on all relevant platforms (particularly lower horsepower platforms) to see if your scroll handler is responsive enough.
You can see this post: More efficient way to handle $(window).scroll functions in jquery? for a couple methods of deferring the scroll processing until the user pauses including a jQuery plugin that makes this automatic.
Generally speaking finding the divs on the page will be much more computationally expensive that a couple if statements. So long as you cache lookups like so (outside of the scroll handler):
var $myDivOfAwesome = $('#awesomeDiv');
$(document).scroll(function() {
if ($myDivOfAwesome.position().top > 1337) {
// do stuff...
}
});
You should be fine.
If you still want to compare different snippets of code to determine what's faster, check out JSperf
I have a little problem with conditions and its triggering. I have 2 object in my HTML (div and img), that I am trying to constantly align by JS. By constantly I mean so that when window size changes, they realign (since one is aligned to the center - and no :), I can't center-align the second one as well, because I also need to match the size, which definitely requires JS).
I made a little function that aligns them and sets proper dimensions to it and I am triggering the function on every window.onresize event (as well as on document ready). But I found out, that it does not trigger on zoom action and besides that it would be more suitable for me not to be dependent on window.onresize.
So I thought there would be a posibility to write a condition like
if (div.width() != img.widht()) {
// do something to match it again
}
But it turned out to only run this condition on the ready event (resp. load event, since I have a picture). So my question is, if there is any way, so that the condition would be checking its state just continuosly? I know, I can probably set Interval to take care of that, but a) I guess that like 99% of all executions would be pointless and b) unless I set it to like very quick repetition, it would not even fix the div's and img's mismatch problem immediately.
Thank you very much.
You can certainly define you own custom event and execute the aligning code when it occurs, but you still need a way to fire the event at appropriate time.
That can only happen during the ordinary execution flow of the program (not an option here) or in the handler for one of the existing events: if none of those events is consistently fired when the trigger condition occurs, then you're only left with timers.
I'd be happy to be wrong on this, tho'.
Consider requestAnimationFrame as an alternative to setInterval.
I'm wring a custom jQuery plugin based on the awesome jGrowl plugin. I just need it to do a few more things than it already does.
Basically everything is working as I need it to (only tested in Firefox so far) except that if you call the plugin too many times too fast it stops and breaks everything
http://jsbin.com/ofejo/edit
Any ideas about what might cause this?
sounds like you need to implement a callback feature and put the additional calls into callbacks to ensure that the plugin processes before other executions occur.
It's rendering and trying to calculate where to place the block but failing because there's an animation already taking place. (often an animation changes the type of display style being used in order to create the effect and this causes oddities with calculations such as these)
You need to queue the effect, but I'm not precisely sure how you would go about it because you're creating new elements, and there's more source code than I am willing to look through at the moment. Let me know if this helps.
http://docs.jquery.com/Effects/queue