CSS3 过渡效果触发时机的问题

像360deg过渡效果,做专题的同学应该是经常做的.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>360deg过渡效果</title>
 6     <style type="text/css">
 7     div{
 8         cursor:pointer;
 9         width:100px;
10         height:40px;
11         background:#92B901;
12         font-size:14px;
13         opacity:0.5;
14         transition-property:width,height,background,font-size,opacity,transform;
15         transition-duration:1s,1s,1s,1s,1s,1s;
16         border-radius:5px;
17         font-weight:bold;
18         color:#FFF;
19         padding:10px;
20     }
21     div:hover{
22         width:120px;
23         height:60px;
24         background:#1ec7e6;
25         font-size:20px;
26         opacity:1;
27         transform:rotate(360deg);
28     }
29     </style>
30 </head>
31 <body>
32     <div>CSS3 transition</div>
33 </body>
34 </html>

其实触发过渡效果有很多种方式,今天总结一下:

1.最常见的hover触发过渡效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hover过渡效果</title>
 6     <style type="text/css">
 7     div{cursor:pointer;width:100px;height:40px;background:#92b901;transition:width 0.5s;}
 8     div:hover{width:200px;}
 9     </style>
10 </head>
11 <body>
12     <div></div>
13 </body>
14 </html>

2.js添加操作来触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js添加样式来触发过渡效果</title>
 6     <style type="text/css">
 7     div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
 8     .change{width:200px;}
 9     </style>
10     <script type="text/javascript">
11         setTimeout(function(){
12             var div = document.querySelector("div");
13             div.classList.add("change");
14         });
15     </script>
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>

比如直接修改style属性来触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js直接修改style属性来触发过渡效果</title>
 6     <style type="text/css">
 7     div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
 8     </style>
 9     <script type="text/javascript">
10         setTimeout(function(){
11             var div = document.querySelector("div");
12             div.style.width="200px";
13         });
14     </script>
15 </head>
16 <body>
17     <div></div>
18 </body>
19 </html>

3.通过伪类触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js直接修改伪类属性来触发过渡效果</title>
 6     <style type="text/css">
 7     div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
 8     input:focus ~ div{width:200px;}
 9     </style>
10 </head>
11 <body>
12     <input>    
13     <div></div>
14 </body>
15 </html>

利用input获得焦点,可以把一些相应提示信息显示出来

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>input获得焦点,可以把一些相应提示信息显示出来</title>
 6     <style type="text/css">
 7     input:focus ~ p{width:200px;transform:scale(1);}
 8     p{transform:scale(0);transition:transform 0.2s;}
 9     </style>
10 </head>
11 <body>
12     <input>    
13     <p>请输入数字</p>
14 </body>
15 </html>

通过active来触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>active来触发</title>
 6     <style type="text/css">
 7     button:active ~ p{width:200px;transform:scale(1);}
 8     p{transform:scale(0);transition:transform 0.2s;}
 9     </style>
10 </head>
11 <body>
12     <button>hold me</button>
13     <p>hahah</p>
14 </body>
15 </html>

开关按钮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input{display:none;}
 8         label{width:100px;height:50px;background:#ADC14E;display:block;border-radius:25px;}
 9         div{width:50px;height:50px;border-radius:50%;background:#FFF;border:1px solid silver;position:relative;left:0;transition: left 0.5s;}
10         input:checked ~ div{left:50px;}
11     </style>
12 </head>
13 <body>
14     <label>
15         <input type="checkbox">
16         <div></div>
17     </label>
18 </body>
19 </html>

如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上.