Question 226343 in CSS Question posted in
Some basic documentation can be found here.

Using CSS transition

I am having troubles understanding CSS transition even when what I think is obvious should work but it doesn’t. What I am trying to accomplish is a little complex than this, but this simple example shows how I think I don’t understand how CSS transitions work yet.

I want the flex-direction property of a container to change from column to row, but the change shouldn’t be instantaneous, but rather slowly so it can be seen. I’ve implemented the code below, but it still doesn’t work even when I think it should.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

.container {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: teal;
  transition: flex-direction 5s ease;
}

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
}

.container:hover {
  flex-direction: row;
}

Thank you.

Tags:

3

Answers


  1. 0

    not everything in animatable. am sure you know that you can not animate display property, same goes for flex-direction, its not animatable.

    Login or Signup to reply.
  2. 0

    Flex-direction is not an animatable property in CSS.

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

    This effect may be done through javascript however.

    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++) {
    
  var node = nodes[i];
  
  // Initialize transforms on node
  TweenLite.set(node, { x: 0 });
   
  boxes[i] = {
    transform: node._gsTransform,
    x: node.offsetLeft,
    y: node.offsetTop,
    node    
  };
} 

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;
    
    // Continue if box hasn't moved
    if (lastX === box.x && lastY === box.y) continue;
    
    // Reversed delta values taking into account current transforms
    var x = box.transform.x + lastX - box.x;
    var y = box.transform.y + lastY - box.y;  
    
    // Tween to 0 to remove the transforms
    TweenLite.fromTo(box.node, 0.5, { x, y }, { x: 0, y: 0, ease });    
  } 
}

    See: https://codepen.io/osublake/pen/eJGrPN

    Login or Signup to reply.
  3. 0

    What you are trying is a nice idea, but transitions does not work with flex direction properties, only properties using quantified values of compatible units can transition between two of those values, like measurements and colors.

    example

    <!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search