導航欄選單底部加動畫橫線
阿新 • • 發佈:2021-02-04
一 效果圖
二 程式碼
<template> <div class="menuList"> <div class="menuItem" v-for="(item, index) in list" :key="index" :class="[index + 1 === active ? 'isActive' : '']" @click="changeMenu(item.id)"> <div class="menu">{{ item.id }}.{{item.name}}</div> <div :class="[index + 1 === active ? 'lineProgress' : '']"></div> </div> </div> </template> <script> export default { name: 'MenuList', data() { return { active: 1, list: [ { id: 1, name: '選單1' }, { id: 2, name: '選單2' }, { id: 3, name: '選單3' }, { id: 4, name: '選單4' }, { id: 5, name: '選單5' }, ], } }, methods: { changeMenu(id) { this.active = id this.$emit('changeTab', id) } } } </script> <style lang="less" scoped> .menuList { width: 100%; height: 60px; line-height: 60px; background: #0D0D0D; display: flex; justify-content: center; .menuItem { width: 200px; height: 60px; cursor: pointer; text-align: center; .menu { font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; opacity: 0.5; position: relative; } } .isActive { background: #000000; //border-bottom: 4px solid #EB1C07; box-sizing: border-box; } .lineProgress { width: 0px; height: 4px; background: #EB1C07; position: absolute; animation:mymove 1s; animation-fill-mode : forwards } @keyframes mymove { from { width:0px; } to { width:200px; } } } </style>
加油 加油