关于transition，css教程中有一个很简单的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a { transition: opacity .5s; overflow: hidden; display: block; } .a:hover { opacity: 0; } </style> </head> <body> <div class="a">testtesttesttesttesttesttesttesttest</div> </body> </html>
当鼠标悬浮于div上时，会渐变消失
但当opacity改为width，或者height时，过渡却不会发生！后来发现当改变width、height等时必须预先设定其高/宽，否则过渡失效！
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a {
/*必须预先设定*/
width: 200px; transition: width 2s; overflow: hidden; display: block; } .a:hover { width: 0; } </style> </head> <body> <div class="a">testtesttesttesttesttesttesttesttest</div> </body> </html>