Html CSS转换-向下和向上滑动

我尝试在单击时显示/隐藏div，并希望使用

CSS

转换，这就像单击打开时一样，它将显示一个具有滑动效果的从上到下的div，当关闭时它将从下向上滑动并隐藏，我尝试使用

CSS转换创建此转换，但不起作用，有人建议吗

这是你的电话号码


$（'.showdiv'）。单击（函数（）{
$（“.morphing_search”）.show（）；
});
$（'.close btn'）。单击（函数（）{
$（“.morphing_search”）.hide（）；
});
正文{
背景：#fff；
}
.变形搜索{
宽度：100%；
高度：500px；
左：0；
顶部：20px；
背景：cdcdcd；
显示：无；
过渡性质：全部；
转换持续时间：.1s；
过渡计时功能：三次贝塞尔（0,1,0.5,1）；
}
.关闭btn{
位置：绝对位置；
右：30px；
顶部：10px；
背景：#f00；
颜色：#fff；
填充物：5px10px；
}

这是测试组
在css中使用动画/转换时，不能使用“显示”属性

所以，我所做的是设置最大高度的动画

在活动状态下，我夸大了值


$（'.showdiv'）。单击（函数（）{
$（“.morphing_search”）.addClass（'active'）；
});
$（'.close btn'）。单击（函数（）{
$（“.morphing_search”）.removeClass（'active'）；
});
.morphing\u搜索{
宽度：100%；
高度：500px；
左：0；
顶部：20px；
背景：cdcdcd；
最大高度：0；
溢出：隐藏；
过渡性质：全部；
过渡持续时间：.7s；
过渡计时功能：三次贝塞尔（0,1,0.5,1）；
}
.morphing_search.active{
最大高度：500px；}
.关闭btn{
位置：绝对位置；
右：30px；
顶部：10px；
背景：#f00；
颜色：#fff；
填充物：5px10px；
}

这是测试组
在css中使用动画/转换时，不能使用“显示”属性

所以，我所做的是设置最大高度的动画

在活动状态下，我夸大了值


$（'.showdiv'）。单击（函数（）{
$（“.morphing_search”）.addClass（'active'）；
});
$（'.close btn'）。单击（函数（）{
$（“.morphing_search”）.removeClass（'active'）；
});
.morphing\u搜索{
宽度：100%；
高度：500px；
左：0；
顶部：20px；
背景：cdcdcd；
最大高度：0；
溢出：隐藏；
过渡性质：全部；
过渡持续时间：.7s；
过渡计时功能：三次贝塞尔（0,1,0.5,1）；
}
.morphing_search.active{
最大高度：500px；}
.关闭btn{
位置：绝对位置；
右：30px；
顶部：10px；
背景：#f00；
颜色：#fff；
填充物：5px10px；
}

这是测试组
1。我没有看到你使用任何css动画。2.为什么不在jQuery中使用
slideToggle（）
呢？我使用了transition，只想用css来处理它。我从这里得到了这个转换：为什么不使用
fadeIn（）
/
fadeOut（）
而不是
hide
和
show
1呢。我没有看到你使用任何css动画。2.为什么不在jQuery中使用
slideToggle（）
呢？我使用了转换，只想用css来处理它。我从这里得到了这个转换：为什么不使用
fadeIn（）
/
fadeOut（）
而不是
hide
和
show
来澄清一下，为了使功能从上到下打开，从下到上关闭，您需要在过渡计时功能中添加关键字“高度”，具体为：高度立方贝塞尔（0，1，0.5，1）@user3200950 max height处理所有内容，您无法在css中设置高度属性的动画。：）为了澄清，为了使功能从上到下打开，从下到上关闭，您需要在过渡计时功能中添加关键字“height”，具体为：height cubic bezier（0,1,0.5,1）@user3200950 max height处理所有内容，您无法在css中设置高度属性的动画。：）