I am trying to create a transition between two routes. My CSS Transition does not seem to work every time, only sporadically. I found this post React css transition does not work correctly which talks about the animation being cut off, but I don't really understand if this would apply for me.
Here is a code-pen of the issue. Right now the transition rarely runs. I am trying to get it to run every time you click the link.
https://codepen.io/rhigdon-the-vuer/pen/jOqEdWO
<div>Code a bit too complex to post here. Let me know if it would be helpful.</div>
My current theory is a re-render canceling out the transition.
Update:
I ended up using the animation css property that was suggested in the comments. This seems to work much better. It now will reliably play the animation.
Here is the updated pen:
https://codepen.io/rhigdon-the-vuer/pen/mdPJBGv?editors=0110
I don't know if this helps you but I altered your code in order to work with refs and pure css value setting and it seems to be working without problems.
Check this sandbox
https://codesandbox.io/s/jolly-bush-mhtby
Tricky part
if (divEl && divEl.current.style.width === "100%") {
setTimeout(function () {
divEl.current.style.width = "0%";
}, 5);
}
You need to set a minimum timeout for the browser to understand that a transition needs to happen.
I tried "quick"-clicking the links and not one time did the transition not show up.
Related
When dynamically adding custom css classes to a dc.selectMenu IE11 kicks them out when filters are applied. For now I push them in again using a renderlet. This causes "glitches"/moves content around due to added padding or widths/heights.
You can reproduce the issue by selecting an option from the select box in my block.
Is this a bug? Does anyone know a cleaner workaround not causing these glitches to appear?
We found that IE11 actually crashes on Win8 if you try to update a selectMenu! So we only render, don't attempt to redraw selectMenu on that browser.
So that's why you need to re-apply it.
In experimenting with this, I found that it was enough simply to move
.on('renderlet', ...
to the selectMenu, where it arguably belongs (because it's modifying that widget). I think this works because the select menu doesn't use any transitions, and there is no delay.
More generally, though, in any modern version of dc.js, you should really use the pretransition event, which fires before any transitions. In sum:
selectMenu.on('pretransition', function(chart){
selectMenu.select('select').classed('uk-select', true);
});
Although it's a really cool word, renderlet is rarely the right event to listen to. You'll see it in a lot of examples because it goes way back to early releases of dc.js, but it occurs after all transitions have finished.
If you use pretransition you'll have a chance to change things before the browser even refreshes at all.
I'm trying to dive deep into browser rendering and came up with this little demo in preparation for a talk.
I put together a animation demo where you can easily switch scheduling from requestAnimationFrame to setInterval and also positioning from top/left-based to top/left-based in combination with translate3d(0,0,0) or even entirely translate3d(x,y,z)-based.
Now I know that stranslate3d isn't a silver bullet and especially that it can become costly if applied to too many elements. However, there is one particular thing that caught my attention. If I switch the positioner from DefaultPositioner to Translate3dPositioner it seems that I get much longer Recalculate Style phases than before. I couldn't find any information about that so I'm wondering if anyone can share more info about what's going on here?
Here is the link to the demo: http://plnkr.co/edit/TKwKBk?p=preview
Just switch implementations inside the app.js file.
One more thing: When you click on resume to kick off the demo, you should wait a little bit until all boxes moved a bit apart. I know it's a poor demo ;-)
I'm an absolute newbie so please bear with me. I've read a lot of
posts here that I think may be related to my question but I'm having a hard time understanding the solutions provided.
I'm trying to create an on-click horizontal accordion with just CSS. With Firefox it works just fine. The problem occurs in Chrome and Safari.
The problem is that every time the links are clicked the page scrolls down almost to the bottom of the page that you need to scroll back up in order to see the entire content. The links look like this:
<h2>title1</h2>
Needless to say this can be very annoying to the user. I've read somewhere that this can
be avoided using JavaScript preventDefault(). How do I go about that? What are the other ways to prevent this?
Edit - so it seems preventDefault() cancels all of the default behaviours(makes sense actually) - The first solution I presented turns out to be not a solution at all.
So, this actually proves quite hard to do.
After some searching I've come to the conclusion that it's not possible to cancel the scroll without also canceling the links default behaviour (hence the default in .preventDefault()).
What you can do is scroll back to where you were after the links scrolling is done, but even if you do it as soon as you possibly can, you'll still be able to see the scrolls hapenning on the browser - so it's an ugly solution. (you can see it here anyway - http://jsfiddle.net/joplomacedo/RpDyc/ ).
So, alternatives? Since as your doing it (I assume here you're using the :target pseudo class) you still need javascript, then forget the :target stuff and rely on javascript alone. It's simpler, cleaner and less 'hacky'.
Here's how I'd do it (jquery) -> http://jsfiddle.net/joplomacedo/AfzJY/
If you however insist on doing it with CSS then I'd recommend doing it as Chris Coyier suggests here by taking advantage not of :target but :checked. I won't further develop here since his article does that pretty well.
Before Edit
Are you using jquery? If so all you'd need is this:
$('a[href="#accordion1"]').on('click', function (e) {
e.preventDefault();
});
If you're not using jquery then here's how to do it with pure javascript:
var cancels_links = document.getElementsByClassName('cancels-link');
var cancel = function cancel(e) {
e.preventDefault();
};
for (var i = 0, max = cancels_links.length; i < max; i++) {
cancels_links[i].addEventListener('click', cancel, false );
}
...this one requires you to add class="cancels-link" to each 'a' element who's default behaviour you want to cancel.
Here's a fiddle with the two solutions -> http://jsfiddle.net/cBQnv/3/
I am having a little trouble achieving a very simply fade effect using CSS3. Here is my scenario:
I have a list a with some content in it. I also have some links, that when clicked filter the content in the list. What I would like is, when the page loads the list fades in, and every time the list is filtered, the list should disappear and than fade in with the new content.
I got the fade in on pageload working. However when I try to get the list to disappear and fade in again, I cant get that to work.
Here is a jsfiddle I created to demonstrate what I am trying to do. - http://jsfiddle.net/YeKX2/28/
Any help on this is appreciated.
Keeping it primarily webkit based and not using jQuery as you seem to be, you could do the following to achieve your goals:
function test(){
document.getElementById('list').style.opacity = "0";
setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}
You'll have to play around with the timing.
Also, to note, if you want to effect the timing of the -webkit-transition, you can use the following syntax.
document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";
I highly recommend including the jQuery library if at all possible. Then fading is as easy as:
jQuery("#elementId").animate({opacity:0});
jQuery("#elementId").animate({opacity:1});
Otherwise you'll end up with browser issues as opacity is handled differently in some browsers(IE) and webkit-transition is an experimental mozilla property.
I've noticed whilst optimising animations for use on iPad using hardware acceleration, I seem to be coming across an issue that I haven't fully been able to resolve. If you are applying webkit transforms such as translate, although the animation runs great, if in the middle of an animation occuring the user scrolls the page, when they release it causes the animation to stutter whereby it reverts to its original position and attempts to continue its animation to it's end point.
I've been looking everywhere for resolve on this issue, having seen it occur on the iPad store as well! If you have an iPad at hand and you navigate to, for example: http://webkit.org/demos/transitions-and-transforms/ , if you select an item then before the button animation has completed drag the page(scroll) then release it, you will see the animation flicker back to its original position and then repeat until its complete.
The only way I've been able to work around this is when a touchmove event occurs, I tell the animation to just stay where at its original location, which stops it from trying to repeat the transition on release, as even attempts to just tell it where to go again cause it to revert regardless (seeing as how css transitions seem not technically able to be stopped).
Has anyone found any workarounds to this issue, I'm pretty sure this is a bug on iPad as opposed to a problem with the animation (this does not involve issues regarding preserve-3d and what have you), or if I should be reporting this as an issue.
Thanks!
Not sure if I'm reading between the lines, but I suspect you might see better results if you use touchend versus touchmove or touchstart.