使用顯示器動畫菜單：flex;

Question

我想用JavaScript（jQuery或vanilla）使用display: flex來設置菜單的動畫效果。這不起作用：

$('#blah').click(function(e){ 
 
    e.preventDefault(); 
 
    $('#mid').animate({flex:'0 0 20%'}); 
 
    return false; 
 
});

* { margin:0; padding: 0; } 
 
#menu { background-color: yellow; display: flex; } 
 
#left {background-color: green; flex: 0 0 200px; } 
 
#mid { background-color: red; flex: 0 0 40%; } 
 
#right {background-color: blue; flex: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
</div> 
 
<div> 
 
<a href="" id="blah">click here to animate mid to 20%!</a> 
 
</div>

動畫使用CSS display: flex菜單？

Answer 1

使用flexBasis在animate函數而不是flex。

$('#blah').click(function(e){ 
 
    e.preventDefault(); 
 
    $('#mid').animate({flexBasis:'20%'}); 
 
    return false; 
 
});

* { margin:0; padding: 0; } 
 
#menu { background-color: yellow; display: flex; } 
 
#left {background-color: green; flex: 0 0 200px; } 
 
#mid { background-color: red; flex: 0 0 40%; } 
 
#right {background-color: blue; flex: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
</div> 
 
<div> 
 
<a href="" id="blah">click here to animate mid to 20%!</a> 
 
</div>

Answer 2

難道這樣的事情對你的工作？

$('#blah').click(function(e){ 
 
    e.preventDefault(); 
 
    $('#mid').css('flex', '0 0 20%'); 
 
    return false; 
 
});

* { margin:0; padding: 0; } 
 
#menu { background-color: yellow; display: flex; } 
 
#left {background-color: green; flex: 0 0 200px; } 
 
#mid { background-color: red; flex: 0 0 40%; transition: all 0.35s ease-in-out} 
 
#right {background-color: blue; flex: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
</div> 
 
<div> 
 
<a href="" id="blah">click here to animate mid to 20%!</a> 
 
</div>