英文:
Using CSS transition
问题
我遇到了一些困难，无法理解 CSS 过渡效果，即使我认为很明显的东西应该能够工作，但实际上却不能。我试图实现的内容比这个简单的例子要复杂一些，但这个简单的例子展示了我对 CSS 过渡效果的理解似乎还不够。
我想要实现的效果是，容器的 flex-direction 属性从 column 变为 row，但这个变化不应该是瞬间的，而是缓慢进行，以便能够看到变化。我已经实现了下面的代码，但即使我认为它应该能够工作，实际上它仍然不起作用。
<!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;
}
谢谢。
英文:
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.
答案1
得分: 1
并非所有内容都可以进行动画处理。我相信你知道无法对display属性进行动画处理，同样适用于flex-direction，它也不可动画化。
英文:
not everything in animatable. am sure you know that you can not animate display property, same goes for flex-direction, its not animatable.
答案2
得分: 1
在CSS中，flex-direction不是一个可动画化的属性。
可以通过JavaScript来实现这个效果。
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 });
}
}
参考链接：https://codepen.io/osublake/pen/eJGrPN
英文:
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 });
}
}
答案3
得分: 1
你正在尝试的是一个不错的想法，但是过渡效果在使用 flex-direction 属性时不起作用，只有使用兼容单位的定量值的属性才能在两个值之间进行过渡，比如尺寸和颜色。
示例：链接
<!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>
英文:
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.
<!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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论