Html 在不使用jquery的情况下更改高度时的Transistion div

我有一个基本的设置。当我增加高度时，我会得到一个平滑的增加。减小时，I应平滑减小，而不是急剧减小

<div className="foo <!-- -->">Hey</div>

附加新类时，div变为

<div className="foo decreaseClass">Hey</div>

嘿

---

如何使这两种变换同时向下/向上？

使用CSS

@关键帧动画

和

交替

属性<代码>无限仅为演示目的而添加。我将

transform:scaleY（1）

添加到

（10）

，而不是

height

演示

正文{
溢出：隐藏
}
.测试{
宽度：200px；
利润率：10px；
背景：红色；
字体大小：32px；
文本对齐：居中；
颜色：白色
}
.B{
高度：40px；
动画：动画1交替无限；
变换原点：顶部；
}
@关键帧动画{
0% {
变换：scaleY（1）；
}
100% {
变换：scaleY（10）；
}
}

---

测试

使用CSS

@关键帧动画

和

替换

属性<代码>无限仅为演示目的而添加。我将

transform:scaleY（1）

添加到

（10）

，而不是

height

演示

正文{
溢出：隐藏
}
.测试{
宽度：200px；
利润率：10px；
背景：红色；
字体大小：32px；
文本对齐：居中；
颜色：白色
}
.B{
高度：40px；
动画：动画1交替无限；
变换原点：顶部；
}
@关键帧动画{
0% {
变换：scaleY（1）；
}
100% {
变换：scaleY（10）；
}
}

---

TEST

这是因为您没有正确关闭

.foo

中的

height

声明。您使用的是逗号而不是分号，这使得

height

和

transition

声明无效。另请注意，相同的声明应在样式属性名称及其值之间包含一个

冒号（
高度：400px；
）

因此，仅当两个类都有时，元素才定义了
高度
和
过渡

看到它工作了吗


document.querySelector（'.foo'）.addEventListener（'click'，函数（事件）{
event.target.classList.toggle（'decreaseClass'）
})
.foo{
高度：200px；
过渡：所有250ms缓解；
边框：1px实心
}
.foo.decreaseClass{
高度：40px；
过渡时间功能：轻松进入
}
嘿
这是因为您没有正确关闭
.foo
中的
高度
声明。您使用的是逗号而不是分号，这使得
height
和
transition
声明无效。另请注意，相同的声明应在样式属性名称及其值之间包含一个
冒号（
高度：400px；
）

因此，仅当两个类都有时，元素才定义了
高度
和
过渡

看到它工作了吗


document.querySelector（'.foo'）.addEventListener（'click'，函数（事件）{
event.target.classList.toggle（'decreaseClass'）
})
.foo{
高度：200px；
过渡：所有250ms缓解；
边框：1px实心
}
.foo.decreaseClass{
高度：40px；
过渡时间功能：轻松进入
}
嘿
最好是显示一个实时演示。作为第一视图，它似乎很好，所以最好为我们提供一个工作片段，以查看行为问题。我一会儿拉小提琴。谢天谢地，最好是展示一个现场演示。作为第一个视图，这似乎很好，所以最好为我们提供一个工作片段，让我们了解行为问题。我一会儿拉小提琴。谢谢为什么他应该使用动画？在他的问题中，这个想法是增加一个类，它将降低高度，这似乎很好。。所以他需要告诉我们到底出了什么问题P的问题是div dec/在一边增加了40px到400px，这是平滑的，但在另一个状态下没有明显的转换。是的，正如你在他的代码中看到的，他正在为此添加一个类。。。它只在一个方向上工作，而在另一个方向上不工作（但它也应该工作），所以代码有一个问题。。。事实上，你提供了一个全新的代码/新的方法来实现这一点，我认为这不是解决他的问题的办法（我可能错了），为什么他应该使用动画？在他的问题中，这个想法是增加一个类，它将降低高度，这似乎很好。。所以他需要告诉我们到底出了什么问题P的问题是div dec/在一边增加了40px到400px，这是平滑的，但在另一个状态下没有明显的转换。是的，正如你在他的代码中看到的，他正在为此添加一个类。。。它只在一个方向上工作，而在另一个方向上不工作（但它也应该工作），所以代码有一个问题。。。事实上，你提供了一个全新的代码/新的方法来实现这一点，我认为这不是对他的问题的修复（我可能错了）。这只是一个拼写错误，我会改变，还有更多的拼写错误
className
应该是
class
并且在
height
和它的值之间应该有一个冒号。语法在CSS中非常重要。这是你的名片。显然，正在工作。className应该很好，我想，是的React@TemaniAfif，虽然可能是这样，但问题本身没有提到React，并且
className
不是有效的标记。但是，阅读代码前的一行：）他提到这个你可能已经注意到了类名，我正在使用react，这只是一个拼写错误，我会改变，还有更多的拼写错误
className
应该是
class
并且在
height
和它的值之间应该有一个冒号。语法在CSS中非常重要。这是你的名片。显然，正在工作。className应该很好，我想，是的React@TemaniAfif，虽然可能是这样，但问题本身没有提到React，并且
className
不是有效的标记。阅读代码前的一行：）他提到这个你可能已经注意到了类名，我正在使用react
<div className="foo decreaseClass">Hey</div>