Page 1 of 1

CSS transitions using classes added with jQuery Rate Topic: -----

#1 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 447
  • View blog
  • Posts: 1,930
  • Joined: 30-April 10

Posted 15 March 2014 - 01:42 PM

CSS transitions are great at changing your style rules smoothly. The problem I found was I always needed to have a pseudo class rule like :hover to make it react. This means I could not use my click to activate an animation through css, until I found how to use jQuery to add a class and make it transition. There is a pseudo class of :target in CSS3 but we will stick to using jQuery to add a class.

Lets look at the concept a bit:

The CSS

In the main CSS styles we will use ids to identify our elements to be changed so we can reference them individually. I found it is best to do it this way so you can make a rule for just that element with certain class or group of classes added to it. For example:


If I have a div with the id of content, I would use:
#content{
   //cool styles here
}



This will set my base for all my transitions. So, if I want my text color to change in my transition I would add a base color here. This goes for most style rules, some I have not yet found a way to transition (text-align is one that comes to mind).


Once the base styles are created by the id we can make some id with a class rules for the transitions. By this I mean a rule like so:


If my id is content and my class is red I use:
#content{
    color:blue;
}
#content.red {
    color:red;
}



This will give me red text when the class is added to the id of content.


We still don't get a transition though, so lets talk about that. In order to get an animation we need to add a transition in the main part of the style base (The id style). This is the first rule that the styles will transition from.

The CSS transition rule has four properties:
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay


These properties can be set individually but i prefer to set them all in one line. So now we need to see what it looks like.


With the id of content we want to transition all possible rules in 1 second using the ease-in-out timing function.
#content{
    color:blue;
    transition: all 1s ease-in-out 0s; // This is the magic rule
}
#content.red {
    color:red;
}




The jQuery

We will use jquery not for the animation functionality, but the ability to add events and classes with elegance and grace with very little work. If you don't understand jQuery yet, head over to jQuery.com and read up.

Now with the basic idea of what is going on it is time to try it out with some examples.

Example 1

For this example we will have a button that will be clicked and an element will grow out of it and fade in.
HTML:
<button id="showForm">Show my form</button>
<div id="content">This is your content</div>


For this example I added two classes that are id spacific and set the transition to all at 1 second with the ease-in-out timing function and a zero second delay.
CSS:
#content {
    color: blue;
    opacity: .0;
    position: relative;
    top: -10px;
    margin-left: 0px;
    margin-right: auto;
    width: 200px;
    border: 1px silver Solid;
    background-color: white;
    transition: all 1s ease-in-out 0s;
}
#content.active {
    opacity: 1;
    top: 200px;
    margin-left: 20%;
}
#content.red {
    color:red;
}



The jquery simply selects the button by id and adds an click event handler and adds an anonymous callback. In the callback it selects the id of content and adds and removes the active and red classes.
JS:
$('#showForm').on("click", function () {
    $('#content').toggleClass('active red');
});



Example 2

This example is a bit like the other, the difference is the the element will toggle the classes on the click of the element it-self.
HTML:
<div id="otherContent">click me!</div>



The css will change size position on the page and color of the text and box-shadow.
CSS:
#otherContent {
    position: relative;
    top: 0px;
    color: green;
    width: 100%;
    box-shadow: 8px 8px 15px 0px #c0c0c0;
    border-radius: 0px;
    padding: 3px;
    transition: all 1s ease-in;
}
#otherContent.active {
    padding: 10px;
    color:red;
    top: 200px;
    width: 50%;
    margin-left: 20%;
    box-shadow: 1px 1px 15px 0px #000;
    border-radius: 10px;
}



When the element with the id of otherContent is clicked it will toggle the class #otherContent.active on its self, which will transition all the rules in one second using the ease-in timing function and no delay.
JS:
$('#otherContent').on("click", function () {
    $(this).toggleClass('active');
});




Example 3

This example will be different, it will be swapping images in a basic manner. It is not the ideal way to switch elements but it is an example. It will use the click of the visible image to transition a new one in using two classes. One class will change the opacity and the other will change the left alignment.
HTML:
<div id="photos">
    <img class="right inActive" src="https://cdn.tutsplus.com/net/uploads/legacy/956_nodeJs/nodeJs.png" />
    <img src="http://ebmedia.eventbrite.com/s3-build/images/3625203/18698303275/1/logo.png" />
</div>



CSS:
#photos img {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 150px;
    left: 0px;
    transition: all 1s ease-out;
}
#photos img.inActive {
    opacity: 0;
}
#photos img.right {
    left: 200px;
}



JS:
$("#photos img").on("click", function () {
    $(this).toggleClass('inActive right');
    $(this).siblings(".inActive").removeClass('inActive right');
});




I hope that this gave you a good idea on how to use use the CSS3 transitions using the click to add classes to your elements.

Full Code For Project
Spoiler

This post has been edited by laytonsdad: 04 June 2014 - 11:37 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1