css我不明白是什麼開啓了轉換

-3

我正在關注如何用css製作網站的視頻教程。我們讓用戶點擊切換時出現的菜單移動。導師，出現的時候更好，增加了一個新的風格。動畫。它的工作原理，但我不明白是什麼導致了過渡。css我不明白是什麼開啓了轉換

感謝弗蘭克

body {background:#eee;} 
 
.animate{ 
 
\t -webkit-transition: all 0.3s ease-out; 
 
\t \t \t transition: all 0.3s ease-out; 
 
} 
 
.header{background:#333;} 
 
.header_logo{color:#fff; float:left;display:block; padding:10px;} 
 
.header_menu{float:right; margin:0px; padding:0px;} 
 
.header_menu_item{display: inline-block;} 
 
.header_menu_item a{color:#fff; display:block; padding:15px;} 
 
.header_menu_item a:hover{background-color: #000000;} 
 
.header_icon-bar{display:block; float:right; padding:20px; display:none;} 
 

 
.header_icon-bar span{display:block;height:3px; width:30px; background:#fff; margin-bottom:5px;} 
 

 

 
/*------------------------ 
 
tablet m 
 
--------------------------*/ 
 
@media (max-width: 998px){ 
 

 
\t 
 
} 
 
/*------------------------ 
 
Smartphone 
 
--------------------------*/ 
 
@media (max-width: 767px){ 
 
.header_icon-bar{display:block;} 
 
.header_menu_item{display:block;} 
 
.header_menu{width:100%; height:0px; overflow:hidden;} 
 
.is-open{height:300px; overflow:auto;} 
 
\t \t 
 
\t 
 
\t 
 
} 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
* html .clearfix    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css"> 
 
<link rel="stylesheet" href="style.css"> 
 

 
<meta charset="utf-8"> 
 
<title>Documento senza titolo</title> 
 
</head> 
 

 
<body> 
 
<header class="header clearfix"> 
 
<a href="" class="header_logo">logo</a> 
 
<a href="" class="header_icon-bar"> 
 
<span></span> 
 
<span></span> 
 
<span></span> 
 
</a> 
 
<ul class="header_menu animate"> 
 
<li class="header_menu_item"><a href="">item</a></li> 
 
<li class="header_menu_item"><a href="">item</a></li> 
 
<li class="header_menu_item"><a href="">item</a></li> 
 
<li class="header_menu_item"><a href="">item</a></li> 
 
</ul> 
 

 

 
</header> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $('.header_icon-bar').click(function(e){ 
 
\t $('.header_menu').toggleClass('is-open'); 
 
\t e.preventDefault(); 
 
\t });//end toggle 
 
\t 
 
\t 
 
}); //edn ready 
 
</script> 
 
</body> 
 
</html>

來源

2017-04-07 franco

類.animate對所有一的WebKit /過渡（所有的CSS propieties），所以當點擊.header_icon-bar它增加了另一個類.is-open .. 。
.is-open有一個高度300px，然後與類動畫（和他的過渡）使div去身高：0到身高：300px。
如果您將轉換（全部）添加到類中，並且您從該類更改了任何css道具，它將會生成動畫。
Ref：https://css-tricks.com/almanac/properties/t/transition/ 乾杯，

來源

2017-04-07 09:20:02 Roy

是的我明白你的意思。 – franco

好的。我很高興你明白 – Roy

對不起，我沒有完成我的文章.... 我的問題是，我總是看到與鼠標事件的過渡，在這種情況下，鼠標事件是單擊圖標欄上添加一個類到另一個元素的標題，所以在實際應用時，我會看到過渡時的風格.is-opne。那麼，爲什麼只是當新的類被應用，而不是之前？這對我來說並不明確。謝謝 – franco

css我不明白是什麼開啓了轉換

回答

相關問題