Using: hover and: A pseudo class such as focus, we can easily switch elements from one style to another, and switching can have a transition effect. But sometimes we want to use JS to drive the transition (that is, to trigger the transition in code) is also achievable.
As with the normal transition, create two style rules first, one is the initial state of the element, one is the state of the end of the transition. Then use JS in the appropriate Hing to modify the corresponding elements of the style can be.
Here's a sample demo with a day and night view Picture:
(1) The day and night scene are two pictures stacked together. The initial transparency of the night view is 0, covering the top of the day map.
(2) Click "See Night View" button, night view chart transparency gradually from 0 to 1, it seems that the screen slowly become night.
(3) Click on "See the Day" button, night view of the transparency gradually from 1 transition to 0, it looks like the restoration of own scene.
The online sample is as follows:
look at the night view See the Day view
<!doctype html>
<title>hangge.com</title>
<style>
IMG {
Position:absolute;
Transition:opacity 5s;
-webkit-transition:opacity 5s;
}
. Solid {
Opacity:1;
}
. Transparent {
opacity:0;
}
</style>
<script>
function tonight () {
var nightimage = document.getElementById ("Nightimage");
Nightimage.classname = "SOLID";
}
function today () {
var nightimage = document.getElementById ("Nightimage");
Nightimage.classname = "Transparent";
}
</script>
<body>
<button onclick= "Tonight ()" > See Night View </button>
<button onclick= "Today ()" > See Day View </button>
<div>
</div>
</body>