Question

我希望使用带有JavaScript（jQuery或vanilla）的display: flex来设置菜单动画。这不起作用：

＆＃13;

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

＆＃13;

* { 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; }

＆＃13;

<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>

＆＃13;

使用CSS display: flex动画菜单？

Answer 1

在flexBasis函数中使用animate而不是flex。

＆＃13;

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

＆＃13;

* { 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; }

＆＃13;

<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>

＆＃13;

Answer 2

这样的事情对你有用吗？

＆＃13;

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

＆＃13;

* { 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; }

＆＃13;

<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>

＆＃13;

使用display：flex;设置菜单动画。

2 个答案: