可以在 flex-direction 属性上使用 CSS 动画或过渡吗？

Posted 2023-03-06

【中文标题】可以在 flex-direction 属性上使用 CSS 动画或过渡吗？

【英文标题】：Can CSS animate or transition be used on the flex-direction property?

【发布时间】：2017-04-12 20:32:57

【问题描述】：

如果有序列表在小屏幕上使用flex-direction: column，在大屏幕上使用flex-direction: row，CSS3 动画或过渡是否可以在媒体查询之间为flex-direction 属性设置动画？

初始页面设置

html 
  box-sizing: border-box;

*,
*:before, *:after 
  box-sizing: inherit;

body 
  font-size: 100%;

ol 
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem 2rem;

ol a 
  display: block;
  padding: 1rem;
  text-decoration: none;
  border-bottom: 1px solid blue;

@media (min-width: 400px) 
  ol 
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  
  ol a 
    display: block;
  

<ol>
  <li><a href="">Nav 1</a></li>
  <li><a href="">Nav 2</a></li>
  <li><a href="">Nav 3</a></li>
  <li><a href="">Nav 4</a></li>
</ol>

http://codepen.io/anon/pen/oYGexa

JavaScript 中的类似动画

'use strict';
console.clear();
var group = document.querySelector('.group');
var nodes = document.querySelectorAll('.box');
var total = nodes.length;
var ease = Power1.easeInOut;
var boxes = [];
for (var i = 0; i < total; i++) 
    if (window.CP.shouldStopExecution(1)) 
        break;
    
    var node = nodes[i];
    TweenLite.set(node,  x: 0 );
    boxes[i] = 
        transform: node._gsTransform,
        x: node.offsetLeft,
        y: node.offsetTop,
        node: node
    ;

window.CP.exitedLoop(1);
group.addEventListener('mouseenter', layout);
group.addEventListener('mouseleave', layout);
function layout() 
    group.classList.toggle('reorder');
    for (var i = 0; i < total; i++) 
        var box = boxes[i];
        var lastX = box.x;
        var lastY = box.y;
        box.x = box.node.offsetLeft;
        box.y = box.node.offsetTop;
        if (lastX === box.x && lastY === box.y)
            continue;
        var x = box.transform.x + lastX - box.x;
        var y = box.transform.y + lastY - box.y;
        TweenLite.fromTo(box.node, 0.5, 
            x: x,
            y: y
        , 
            x: 0,
            y: 0,
            ease: ease
        );
    

body 
  color: #333;
  padding: 10px 24px;


h1 
  font-weight: normal;
  font-size: 24px;


.group 
  width: 600px;
  height: 600px;
  padding: 4px;
  background: #ddd;
  display: flex;
  flex-direction: row;


.box 
  margin: 4px;
  padding: 8px;
  font-size: 18px;
  width: 126px;
  height: 126px;

.box:nth-child(1) 
  background: rgba(63, 81, 181, 0.6);

.box:nth-child(2) 
  background: rgba(103, 58, 183, 0.6);

.box:nth-child(3) 
  background: rgba(33, 150, 243, 0.6);

.box:nth-child(4) 
  background: rgba(0, 188, 212, 0.6);


.group.reorder 
  flex-direction: column;
  align-items: center;

<h1>Hover to change flex direction</h1>

<div class="group">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

https://codepen.io/osublake/pen/eJGrPN?editors=0010

【参考方案1】：

不，只有使用兼容单位的量化值的属性才能在其中两个值之间转换，例如测量值和颜色。

【参考方案2】：

答案是否定的。 flex-direction 不是 CSS 中的动画属性。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

【参考方案3】：

你不能喜欢已经anwserd，但是有tweenlite

TweenLite.ticker.addEventListener("tick", () => dirty && layout());

这里有一个例子Codepen。

【讨论】：

一个简单的示例代码展示如何为 flex-direction 设置动画怎么样？

【参考方案4】：

如前所述，flex-direction 不能直接设置动画，并且浏览器“不知道”如何在这种过渡期间直观地插入弹性项目的位置。但是您可以通过转换转换和在 transitionend 事件上更改 flex-direction 来模拟这种转换（一个快速演示来说明这个想法：http://codepen.io/SelenIT/pen/ZBXrXV/）。