Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use JavaScript to trigger the transition effect". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use JavaScript to trigger the transition effect.

Using pseudo-classes such as: hover and: focus, we can easily switch elements from one style to another, and the switch will have a transitional effect. But sometimes it's possible to use js to drive the transition (that is, to trigger the transition in the code).

As with normal transitions, two style rules are created first, one is the initial state of the element, and the other is the end state of the transition. Then use js to change the style of the corresponding element at the appropriate event.

Here is an example of switching between day and night scenes:

(1) the day and night scenes are stacked on top of each other. The initial transparency of the night view is 0, covering the top of the sun view.

(2) Click the "look at the night view" button, the transparency of the night scene gradually changes from 0 to 1, and it seems that the picture gradually becomes a night scene.

(3) Click the "watch the sun view" button, the transparency of the night scene gradually changes from 1 to 0, and it seems that the picture is restored to the day scene.

The online examples are as follows:

Hangge.comimg {position:absolute; transition: opacity 5s;-webkit-transition: opacity 5s;}. Solid {opacity: 1;}. Transparent {opacity: 0;} function toNight () {var nightImage = document.getElementById ("nightImage"); nightImage.className = "solid";} function toDay () {var nightImage = document.getElementById ("nightImage"); nightImage.className = "transparent";} look at the sun

Thank you for reading, the above is the content of "how to use JavaScript to trigger transition effect". After the study of this article, I believe you have a deeper understanding of how to use JavaScript to trigger transition effect, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.