CSS Animations/Transitions on

Question

I'm looking for some help. I wish for some CSS animation to be applied to a div id called content when one of the navigational buttons is clicked.

When the is clicked, I want the animation to be triggered so that it disappears off of the page and the new page is loaded.

Navigational Bar

<ul id="nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="about-us.html">ABOUT US</a></li>
    <li><a href="clients.html">CLIENTS</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
</ul>

Content Box HTML

<div id="content">
</div>

CSS Styling

    @-moz-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }
}

@-o-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    -moz-animation-name: fadeOutDownBig;
    -o-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

What you want is in simple words called Ajax.

You can use Ajax to first send a request to the server to load the page contents like this:

$.ajax({
 url: "page_url"
});

Then on success write the data to the div as:

$.ajax({
 url: "page_url",
 success: function (data) {
  $('#content').html(data);
});

This way the content will stay there but its content will get updated!

If you want to change the url too, then use window.location or window.href.

Other idea to do is to first load all the content. Then use jQuery to show/hide the divs as:

$('#nav li').click(function () {
  $('#content').hide();
  $('#newcontent').show(); // this is a new div 
                           // that you will show once click is done.
}

Once a click is made the div will hide and other div that has the new content will show. This way, you won't need to create a new request to server and will just hide/show the contents. You can add more styling to the page too.

This way, you will be able to change the content that is being shown on the webpage when an event, for example: click, is made on any element. You will need to use jQuery API to handle these.

Note: This is just a simple way to do that, you have many other chances of doing the same thing too.

Good luck brother! Cheers.

Reference to these technologies:

For Ajax:

From Mozilla developer network: https://developer.mozilla.org/en/docs/AJAX

From jQuery API: http://api.jquery.com/jQuery.ajax/ (Must read this)

For jQuery:

From jQuery: http://www.jquery.com/

From jQuery API: http://api.jquery.com/

How would I apply animations using CSS to the DIVs though when they are shown or hidden? — user16174, Oct 06 '13 at 17:58
No no, in CSS its just `display: none` `display: block` and there is no animation is CSS, you need to use JavaScript! — Afzaal Ahmad Zeeshan, Oct 06 '13 at 17:59
In my third CSS snippet, you'll see the CSS animations. I wish to apply these to a element when a link is clicked. — user16174, Oct 06 '13 at 18:08
Then why don't you just swipe the elements? :) I mean why dont just change the id there, and use it! :) — Afzaal Ahmad Zeeshan, Oct 06 '13 at 19:06
Because when I apply the id, the animation is displayed when the page is loaded. I want the animation to occur before the page is left. — user16174, Oct 06 '13 at 19:36
You can use an event. More like on click or something to display the animation for that id — Afzaal Ahmad Zeeshan, Oct 06 '13 at 20:00

score 1 · Answer 2 · edited Oct 06 '13 at 19:16

From @afzaal's suggestion, you should use an ajax call to get the data from the server. But you can use the .load() method to automatically switch the content within your #content tag:

$('#content').load('http://url.com #content');

Adding to this that you want a fade in/out animationg to transition the content, you can use css transitions with a class change that will trigger it:

$('#nav li').on('click', function(){ //on a menu item click
    $('#content').one('transitionend, function(){ //called .one() because we only want it to fire once
        $('#content').load('http://url.com #content', function(){ //load content form server via ajax. The #content form the requested page will be appended to the #content of the current DOM
            $('#content').removeClass('animating'); //remove class; will trigger exit transition
        });
    });
    $('#content').addClass('animating'); //add class; will kick off transition
});

You only want to bind on the transitionend event of when your container fades out, so that's why I use the .one() function. This is so that we can kick off the .load() call as soon as the content's hidden. We don't need to know when the css fadeIn is complete given that there's nothing to do once the new content is visible.

And here's the quick (non-tested or validated) css transitions to go with it:

#content{opacity:1; transition: opacity 2s;}
#content.animating{opacity:0;}

Note: transitionend will be thrown and caught when a css transition is ended on that element. For full compatibility, you will need to add all the variances for all major browsers(Chrome, Opera, Firefox, IE).

Note 2: Same thing goes with the css transitions, be sure to add all variations of transition for full compatibility with all browsers.

score 0 · Answer 3 · answered Oct 06 '13 at 17:45

0

Sadly there is no onClick event in CSS nor can you target any element outside the element that an event is triggered on.

You could do this with javascript though.

answered Oct 06 '13 at 17:45

Tanel Eero

642
3
8

You're sadly wrong brother! `onclick` is like `active` in CSS, and you can use it! Just like this: `button:active {/* any property */}` This way you will control the onclick. But what the asker wants is something else! – Afzaal Ahmad Zeeshan Oct 06 '13 at 17:48
1

Not true. button:active would only apply the style while the button is held down. Quite different from onClick. See this post http://stackoverflow.com/questions/13630229/onclick-in-css – Tanel Eero Oct 06 '13 at 18:02

CSS Animations/Transitions on

3 Answers3

Reference to these technologies: