如何从下面制作元素外观的动画

Question

我有这样的代码：https://codepen.io/mymddboeyws-knowledgemd-com/pen/KKovdxV

css 中的第150个字符串

/* Animation */
.pricing-items-container{
position: relative;
}
.pricing .pricing-items{
margin-top: -190px;
position: absolute;
bottom: 0;
left: 0;
height: 0;
transition: 1s;
visibility: hidden;
opacity: 0;
/*transition: visibility 0s, opacity 0.5s linear;*/
}
.pricing .pricing-items.active{
visibility: visible;
opacity: 1;
position: relative;
height: 100%;
z-index: 2;
}

我希望卡片从下到上显示，但它们喜欢从上到下/向上滚动。我该怎么修？

Answer 1

实际上，由于您的margin-top样式，您的卡正在以这种方式转换
您可以将margin-top添加到活动卡中，但活动卡margin-top的值应该更低，以模拟上卷效果。

/* Animation */
.pricing-items-container{
position: relative;
}
.pricing .pricing-items{
margin-top: -100px;
position: absolute;
bottom: 0;
left: 0;
height: 0;
transition: 1s;
visibility: hidden;
opacity: 0;
/*transition: visibility 0s, opacity 0.5s linear;*/
}
.pricing .pricing-items.active{
margin-top: -190px;
visibility: visible;
opacity: 1;
position: relative;
height: 100%;
z-index: 2;
}