实现卡片的展开缩放动画

本文主要是介绍实现卡片的展开缩放动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原理，外层包裹一个元素，子元素分别是展开和收起的元素，然后对展开的元素添加动画，动画内容是随时间变化，将卡片的transform：rotateX属性进行调整，因为改变的是子元素的旋转，父元素高度并没变，不会影响列表大体布局。

.rotate-down {transform-origin: 50% 0%;animation: rotateDown 0.3s;
}
.rotate-up {transform-origin: 50% 100%;animation: rotateUp 0.3s;
}
@keyframes rotateDown {0% {transform: rotateX(90deg);opacity: 0.2;}100% {transform: rotateX(0deg);opacity: 1;}
}@keyframes rotateUp {0% {transform: rotateX(-90deg);opacity: 0.2;}100% {transform: rotateX(0deg);opacity: 1;}
}

这篇关于实现卡片的展开缩放动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---