vue3+typeScript 手风琴(每周一个小组件)

实现功能：带切换动画效果的手风琴

每周分享一个vue3+typeScript的小组件，记录下实现过程，说不定对你有帮助。转载

预览地址 euzhi.com/demo/#/caro…

html

ts

css

.accordion { width: 800px; padding: 50px 20px; background: #ecf0f3; height: 600px; .item { text-align: center; line-height: 80px; margin: 0 auto; width: 600px; height: 80px; border-radius: 12px; box-shadow: inset 12px 12px 20px #d1d9e6, inset -12px -12px 20px #fff; cursor: pointer; margin-bottom: 5px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .content { opacity: 0; min-height: 80px; width: 600px; margin: 0 auto; animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both; } } 

vue3持续更新中...