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.
Related
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.
I'm trying to recreate an animation using css, I have 5 different animations, I'm trying to get it into one css code and position it correct, here's an example of the animation:
http://gfycat.com/GeneralElegantDiscus
I have all these:
BASE
CRYSTAL
ARM1
ARM2
GLOW
GFYCAT
I have no idea how to do get it all together and position it, here's how I want it to look with all the pieces together:
http://i.gyazo.com/f3dd728494367e53d51f23a3697a041b.png
Can someone help me out?
if the animations are not timed well, its not a problem.
Sorry for my bad english, It's not native.enter code here
Help will be much appreciated
To get them all together, you'll need to change your #-keyframes with unique animation names (currently, they're all play)
Because this is animation, I would recommend you look into absolute positioning.
Finally, because you're new/learning CSS, read up on the console and how you can manipulate CSS values using an Inspector (Web Inspector, FireBug, etc.)
Here's something I threw together quickly (only works in Chrome) for reference: http://jsfiddle.net/Lvc279p8/
Good luck.
I am trying to make a dialog box for one of my web app. I have the concept implemented at http://jsbin.com/etuyut/2/edit.
I would like to have the dialog box come in with animation.
I understood that going out (hiding) of the dialog with animation is not possible as the wrapper's display becomes none. I would like to know what is the problem with bringing in (showing) of the dialog.
I use ZeptoJS for front-end.
Whey? Well this is whey...
http://w3schools.invisionzone.com/index.php?showtopic=46498
While fading in, change display to block, THEN increase opacity to 1.0
While fading out, decrease opacity to 0.0, THEN change display to none
Before next fade in, change display to block once again...
Fading is pretty routine job, nothing impossible in it. Let me know if you need help with code after going through the link above. I think this is enough to push you in the right direction for now.
I am following a CSS3 transition tutorial: here
I cant manage to get this to work without having to hover. Does anyone have any idea how I could have this same effect from this tutorial without having to hover on the body?
Thanks
You can simplify the answer from #Rufus by simply putting the 'test' class on the body directly in the markup. There's no reason to add it with javascript later.
If you were using css3 transition, then you WOULD need to add the transitioned class after page load, but since you are using keyframe animation, you don't need to wait before adding it.
Here's the example from #Rufus modified to show what I'm talking about: http://jsfiddle.net/mALEC/2/
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/