CSS Animate

Animation in CSS is a very powerful tool which may make a website look interesting. One may confuse between animation and transition effect and may find a similarity, but the difference is huge.

A transition has only a start and an end state. An element changes from one state to another and the browser fills in that state change with a sequence of in-between frames. To change an element from one state to another smoothly, a transition is a good choice.

On the other hand, CSS Animations are a more powerful alternative to transitions. Rather than changing from one beginning state to an end state, animations can be made up of as many states, in-between states, as one may like. It offers more control over how the states are animated. Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.

Animation in CSS provides many animations like bouncing, fading, flipping etc.

To include animations, some easy codes needs to be written in the .css file of application.

For example, if one wants to give a sliding out animation to its element, one should write:

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

jsTree in Rails

jsTres is an open source jquery plugin which provides interactive trees. It supports HTML and JSON data with AJAX. It is easily extendable, themeable and configurable. It is useful in creating static and as well as dynamic trees. Dynamic tree works with AJAX, which fetches data from the server.

To begin, download it from jstree and include the dist folder in your assets folder of Rails application.

Setup a container in the view page where the tree should be shown. The container can be as simple as just a div, for example:

<div id="jstree_demo_div"></div>

Once the DOM is ready, jstree instance can be created like:

$(function () { $('#jstree_demo_div').jstree(); });

The selected node can be inspected with:

$("#jstree").on("select_node.jstree", function (event, node) {})

Data about the selected node can also be obtained, some examples:

.text will return the name of node,
.id will return id of the node.

Static tree can be created just by giving some attributes like text, children etc. Children attribute is given as an array of strings. One example is as:

<div id="jstree"></div>

<script>
    $(function () {
        $('#jstree').jstree({
            'core': {
                'data': [
                    'SocialMatic',
                    {
                        'text': 'Accounts',
                        'children': [
                            {
                                'text': 'Users'
                            },
                            {
                                'text' : 'Campaigns',
                                'children' : [
                                    {
                                        'text' : 'MarketPlaceConfig',
                                        'children'  : [
                                            {
                                                'text': 'Products',
                                                'children': ['GooglyResponses', 'Postings','BrokenPostings']
                                            }
                                        ]
                                    },
                                    {
                                        'text' : 'SocialMediaConfig',
                                        'children' : [
                                                'Postings', 'BrokenPostings'
                                        ]
                                    },
                                    'TwitterSms', 'PinterestSms',{
                                        'text':'FacebookSms',
                                        'children' : ['FacebookPageSms']
                                    },'FacebookPageSms','GoogleSms','GooglePageSms'
                                ]
                            }
                        ]
                    }
                ]
            }
        })

The above will generate a static tree. 

An example of script for a dynamic tree:

$('#jstree').jstree({
    'core' : {
        'data': {
            'url': function (node) {
                return node.id === '#' ?
                        '<%=trees_tree_path%>' :
                        '<%=trees_treec_path%>';
            },
            'data': function (node) {
                return {'id': node.id, 'text': node.text};
            }
        }
    }
});

The jsTree will automatically place AJAX request on the url path.