Home > Developer > Web Develop
Do not know people do CSS3 animation when you have encountered this situation?
Use opacity to achieve fading effects. Oh! good! All normal to a chestnut:
<!DOCTYPE html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21st
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
Code laycode-v1.1Or with animation, write in Keyframe. You don't write code here.
But inevitably we will encounter such demand, also will encounter: we all know opacity:0 time, in fact, he still occupies the page space, he will obscure the layer below him (not visual). And some of the onclick events that bind to him also happen. At this time we want to opacity:0, hide him, with Display:none. Well, let's just add a few words to the CSS and become
.div1{ background: red;}.div2 { width:100px; height:100px; background:blue; transition:opacity 2s; -moz-transition:opacity 2s; /* Firefox 4 */ -webkit-transition:opacity 2s; /* Safari and Chrome */ -o-transition:opacity 2s; /* Opera */ opacity: 0; display: none;} .div1:hover .div2 { opacity:1;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21st
Code laycode-v1.1Open the browser to see the effect first. I rub .... Fade in and out of the effect is all gone ... This is simply a destructive effect, which is also the big pits that were encountered during the animation process
The smart yards certainly have a way to solve this situation. We all know that the effect of visibility is in fact similar to display to a certain extent, certainly to some extent. Then why is it only a certain extent similar, because it is still occupied space, then this time crossing will say, so use with opacity no difference
But the smart yards must think again, at this time, he will not obscure to the following layer, that is, he and opacity such a different existence, onclick and other events will not happen.
For us, the next visibility, commonly used is the visible and hidden two values. But it can also be a number, equal to 0 when the equivalent of hidden, and as long as more than 0 o'clock, visibility is visible. Then we take advantage of this.
.div1{ background: red;}.div2 { width:100px; height:100px; background:blue; transition:all 2s; -moz-transition:all 2s; /* Firefox 4 */ -webkit-transition:all 2s; /* Safari and Chrome */ -o-transition:all 2s; /* Opera */ visibility: hidden} .div1:hover .div2 {
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
Code laycode-v1.1Browsing, you will find that this time there will be a delay hidden effect. Well, I found something new.
What about the effect of the gradient ....
The smart yards were reminded of opacity ... How do you use it together?
.div1{ background: red;}.div2 { width:100px; height:100px; background:blue; transition:all 2s; -moz-transition:all 2s; /* Firefox 4 */ -webkit-transition:all 2s; /* Safari and Chrome */ -o-transition:all 2s; /* Opera */ visibility: hidden; opacity: 0} .div1:hover .div2 { visibility: visible;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21st
Code laycode-v1.1Browse First ...!!!!! Everything's fine.
In fact, visibility will be applied after opacity comes into effect. For example, when hiding, the first opacity to 0, and then apply the Visibility:hidden this time is hidden, related events will not happen. Looks like Display:none was abandoned at this time.
Of course, some people will say Visibility:hidden always occupy the page space, display can reduce the page repaint, or to use display:none how to do it
The smart yards think again: turn display into a block and delay the execution of transition animations
Of course, it's going to need JS.
These are the pits found in display and transition ...!
Pit of transition and display in CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
