Can CSS animate or transition be used on the flex-direction property?

问题

If an ordered list uses flex-direction: column on small screens and flex-direction: row on larger screens, can CSS3 animations or transitions animate the flex-direction property between media queries?

Initial page set up

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

Similar animation in 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:

No, only properties using quantified values of compatible units can transition between two of those values, like measurements and colors.

回答2:

The answer is no. flex-direction is not an animatable property in CSS.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

回答3:

As already anwsered, flex-direction can't be animated directly, and browsers "have no idea" how to interpolate the positions of flex items visually during such transition. But you can kind of emulate such transition by transitioning transforms and changing flex-direction on transitionend event (a quick demo to illustrate the idea: http://codepen.io/SelenIT/pen/ZBXrXV/).

回答4:

You cant like already anwserd, but there are took tweenlite

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

Here is one example for you Codepen.

来源：https://stackoverflow.com/questions/40855837/can-css-animate-or-transition-be-used-on-the-flex-direction-property