Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the JavaScript function to achieve CSS3 transition and animation. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1) classList is used to add and remove API of CSS class

The classListAPI provides a native way to add, delete, switch, or check for elements that exist in the CSS class. It is much easier than parsing element.className:

Element.classList.add ("someclass") / / add a class to the element

Element.classList.add ("class1", "class2", etc.) / / add multiple CSS classes. Not supported by IE11 or FF26 or earlier.

Element.classList.remove ("someclass") / / remove a class from the element

Element.classList.remove ("class1", "class2", etc.) / / remove multiple CSS classes. Not supported by IE11 or FF26 or earlier.

Element.classList.toggle ("someclass") / / switch a class. Delete and return false if it already exists. Otherwise, add class and return true

Element.classList.toggle ("someclass", expression) / / adds or removes "someclass" based on the result of the expression. Not supported by IE11 or FF26 or earlier.

Element.classList.contains ("someclass") / / check to see if a class exists in the element

Basic support for classList is very good, and if you still need to cater to old IE browsers, then this is a good pollyfill.

With classList API, we can store CSS transformations for playback in the CSS class, and play and reverse them on demand by adding or removing them to elements. This is almost magical:

# A box {

Width: 250px

Height: 100px

Background: Navy

Margin-bottom:1em

-webkit-transform:scale (0.5)

Transformation: scale (0.5)

Opacity: 0

-webkit-transition: all .5s

Transition: all .5s

}

# abox.openbox {

-webkit-transform:scale (1)

Transformation: scale (1)

Opacity: 1

}

Show / hide

Adding and removing CSS classes makes it easy to apply CSS transformations on demand and provide all complex vendor prefixes for selection properties defined in transformCSS, such as "".

On "how to use the JavaScript function to achieve CSS3 transition and animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.