Javascript 更改元素的方向"；走向；当变小的时候

首先，我为这个糟糕的标题道歉，但这可能就是我自己找不到答案的原因

我正在练习一些CSS动画，我希望

表单

元素的高度从

100px->0

开始，但我希望它从上到下这样做。默认情况下，它是从下到上的

那么我如何改变元素决定“关闭”自身的位置呢

const form=document.querySelector（'form'）；
const submit=document.querySelector（'.submit'）；
const div=document.querySelector（'div'）；
submit.addEventListener（'click'，e=>{
e、 预防默认值（）；
form.classList.add（'height'）；
/*add（'div--animate'）*/
});
表单{
/*背景：浅蓝色*/
底部：0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：100px；
溢出：隐藏；
位置：相对位置；
过渡：高度.15s线性，宽度.15s线性；
宽度：400px；
}
.身高{
身高：0；
宽度：0；
}

<代码> > p>可以考虑缩放转换，并调整转换原点以决定元素应该走到哪里。如果需要，您也可以保留宽度/高度，但可以为其添加延迟，以便在比例结束时更改


const form=document.querySelector（'form'）；
const submit=document.querySelector（'.submit'）；
const div=document.querySelector（'div'）；
submit.addEventListener（'click'，e=>{
e、 预防默认值（）；
form.classList.add（'height'）；
});
表单{
底部：0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：100px；
溢出：隐藏；
位置：相对位置；
过渡：变换.15s线性，高度0.15s线性，宽度0.15s线性；
变换原点：右下；/*中心|右上|左|*/
宽度：400px；
}
.身高{
宽度：0；
身高：0；
变换：比例（0）；
}

<代码> > p>可以考虑缩放转换，并调整转换原点以决定元素应该走到哪里。如果需要，您也可以保留宽度/高度，但可以为其添加延迟，以便在比例结束时更改


const form=document.querySelector（'form'）；
const submit=document.querySelector（'.submit'）；
const div=document.querySelector（'div'）；
submit.addEventListener（'click'，e=>{
e、 预防默认值（）；
form.classList.add（'height'）；
});
表单{
底部：0；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：100px；
溢出：隐藏；
位置：相对位置；
过渡：变换.15s线性，高度0.15s线性，宽度0.15s线性；
变换原点：右下；/*中心|右上|左|*/
宽度：400px；
}
.身高{
宽度：0；
身高：0；
变换：比例（0）；
}

我建议的最简单的方法是将您的表格放置在
位置：相对在相对容器内，并使用
底部：0让它停留在那里。我能建议的最简单的方法是把你的表格放在
位置：相对在相对容器内，并使用
底部：0
将其保留在那里。回答得很好，不知道您可以引用一个不在同一类名中的转换值，即
转换：transform.15s…
在
表单
选择器中。@BrandonBenefield是的，您可以，即使您没有设置它，也会有一个默认值；）因此，您可以将所有属性放置在transition中，而无需定义它们[当然，它可能不起作用，因为某些属性需要默认值]使用
缩放时具有宽度/高度的优点是什么？我看不出有什么区别，是不是有什么我不知道的地方？@BrandonBenefield视觉上没有区别，但将高度-宽度设置为0会将元素从流中移除，并且不会占用空间，但仅使用缩放将保留元素的空间。。。当然，如果你只需要一个视觉效果，你没有义务保持高度/宽度转换。你是绝对正确的，谢谢你的建议。回答很好，不知道你可以引用一个不同类名的转换值，例如，
transition:transform.15s…
在
表单
选择器中。@BrandonBenefield是的，您可以，即使您没有设置它，也会有一个默认值；）因此，您可以将所有属性放置在transition中，而无需定义它们[当然，它可能不起作用，因为某些属性需要默认值]使用
缩放时具有宽度/高度的优点是什么？我看不出有什么区别，是不是有什么我不知道的地方？@BrandonBenefield视觉上没有区别，但将高度-宽度设置为0会将元素从流中移除，并且不会占用空间，但仅使用缩放将保留元素的空间。。。当然，如果你只需要一个视觉效果，你没有义务保持高度/宽度转换。你是绝对正确的，谢谢你的建议。