可以在flex-direction属性上使用CSS动画或过渡吗? [英] Can CSS animate or transition be used on the flex-direction property?

问题描述

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

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?

初始页面设置

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

推荐答案

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

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

这篇关于可以在flex-direction属性上使用CSS动画或过渡吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！