实现功能：带切换动画效果的手风琴
每周分享一个vue3+typescript的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。
思路：点击手风琴标题传入它的索引,定义一个参数来接收点击的索引，这个参数等于索引就显示手风琴内容。自定义内容可以根据索引来动态显示。
html部分
{{vo.title}}
{{vo.content}}
我是自定义内容1
我是自定义内容2
我是自定义内容3
.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持续更新中…
