web-dev-qa-db-ja.com

CSSはflex-directionプロパティでアニメーションまたはトランジションを使用できますか？

順序付きリストが小さな画面で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=001

cssflexboxcss-transitionscss-animations
9
Dan

いいえ、互換性のある単位の定量化された値を使用するプロパティのみが、測定値や色など、これらの2つの値の間で遷移できます。

10
Niels Keurentjes

答えはいいえだ。 flex-directionはCSSでアニメート可能なプロパティではありません。

ソース： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

2
Michael_B

すでに説明したように、flex-directionを直接アニメーション化することはできず、ブラウザはそのような移行中にフレックスアイテムの位置を視覚的に補間する方法を「知りません」。ただし、変換を遷移し、transitionendイベントでflex-directionを変更することで、このような遷移をエミュレートできます（アイデアを説明する簡単なデモ： http://codepen.io/SelenIT/pen/ZBXrXV / ）。

1
Ilya Streltsyn