CODEWITHSUNDEEP
javascriptjquerycss
Alexander Solonik
Alexander Solonik

Reputation: 10250

webkitTransition , what does this mean to CSS-3 , using Jquery?

please have a look at the below code : 

$(document).ready(function () {
    var defaults = {
        duration: 4000,
        easing: ''
    };

    $.fn.transition = function (properties, options) {
        options = $.extend({}, defaults, options);
        properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
        console.log(properties);
        $(this).css(properties);
    };

    $('.element').transition({
        background: 'red'
    });

});

i was just reading through a famious article online and if you go to the section that says "Programmatic transitions" , u'll see what i am talking about , now when coding animations in css-3 i was used to the below syntex : 

-webkit-transform: .3s;
-moz-transform: .3s;
-ms-transform: .3s;
-o-transform: .3s;

but when creating css-3 transitions , i see alot of stuff like below : 

var transEndEventNames = {
  WebkitTransition : 'webkitTransitionEnd',
  MozTransition    : 'transitionend',
  OTransition      : 'oTransitionEnd otransitionend',
  transition       : 'transitionend'
}

what is WebkitTransition , MozTransition etc ??

in the 1st example i have provided , what is webkitTransition ? although seemingly obvious , what these things mean , totally elude me as JS newbie.

would seriously appreciate a genuin ttemp to answwer my question .

EDIT :: : i just want an answer for the below question .

is Transition in JS equililent to transition is CSS-3 ?? Why the uppercase syntax . as somebody pointed out in the comments below , i get it that jquery added prefixes automatically.

Thank you.

Alex-Z.

Upvotes: 0

Views: 389

Answers (1)

Mircea
Mircea

Reputation: 11623

is Transition in JS equililent to transition is CSS-3

Yes, a "JS transition" is the same as a CSS transition. It is only a matter of where and how those transitions are created and triggered, but nevertheless the result is the same.

Why the uppercase syntax

This is a naming convention. All CSS proprieties are "named" in the CSSStyleDeclaration as camel-case:

partial interface CSSStyleDeclaration {  [TreatNullAs=EmptyString] attribute DOMString _camel_cased_attribute;
};

http://dev.w3.org/csswg/cssom/

So you can assign a transition/CSS propriety to an element as following:

element.style["-webkit-transition"] = "all 1s"
or
element.style.WebkitTransition = "all 1s"

Its the same thing

I you open your browser console and type: document.body.style you will noticed that everything you write in CSS as -prefix-propriety will be "stored" as PrefixPropriety

i get it that jquery added prefixes automatically

Good for them

Upvotes: 1

Related Questions