Question

如果有序列表在小屏幕上使用flex-direction: column而在较大屏幕上使用flex-direction: row，那么CSS3动画或转换可以在媒体查询之间为flex-direction属性设置动画吗？

初始页面设置

＆＃13;

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

＆＃13;

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

＆＃13;

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

JavaScript中的类似动画

＆＃13;

'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
        });
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

Answer 2

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

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

Answer 3

正如已经提到的那样，flex-direction无法直接制作动画，而且浏览器也不知道＆＃34;如何在这种过渡期间直观地插入柔性物品的位置。但是，你可以通过转换变换并更改flex-direction transitionend事件（快速演示来说明这个想法：http://codepen.io/SelenIT/pen/ZBXrXV/）来模仿这种过渡。

Answer 4

你可能不喜欢已经是awserd，但是花了tweenlite

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

以下是您Codepen的一个示例。

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

4 个答案: