vue 菜单切换动态绑定css3 demo

最新推荐文章于 2024-08-23 15:35:36 发布

andyzyqandyzyq

最新推荐文章于 2024-08-23 15:35:36 发布

阅读量286

点赞数

文章标签： vue css3

本文链接：https://blog.csdn.net/andyzyqandyzyq/article/details/104336260

版权

这个dome，是我为了做一个菜单切换效果的例子

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <style type="text/css">
           html,body{
               padding: 0;
               margin: 0;
           }
           #app{
               font-size: 20px;
               width: 800px;
           }
           .bt{
               height: 80px;
               display: flex;
               position: relative;
           }
           .btItem{
               width: 20%;
               display: flex;
               justify-content: center;
               align-items: center;
               border: 1px solid #ddd;
           }
           .tabs__line{
               width: 50px;
               position: absolute;
               bottom: 2px;
               left: 0;
               z-index: 1;
               height: 3px;
               background-color: #ee0a24;
               border-radius: 3px;
               transform: translateX(100px) translateX(-50%);
               transition: all linear 0.5s;
           }
       </style>
   </head>
   <body>
       <div id='app'>
           <div class="bt">
               <div class="btItem" :class="{active:activeName==0}" @click="test(0)">
                   测试1
               </div>
               <div class="btItem" :class="{active:activeName==1}" @click="test(1)">
                   测试2
               </div>
               <div class="btItem" :class="{active:activeName==2}" @click="test(2)">
                   测试3
               </div>
               <div class="btItem" :class="{active:activeName==3}" @click="test(3)">
                   测试4
               </div>
               <div class="btItem" :class="{active:activeName==4}" @click="test(4)">
                   测试5
               </div>
               <div class="tabs__line" :style="{'transform':'translateX('+distance+'px) translateX(-50%)'}"></div>
           </div>
       </div>
   </body>
   <script type="text/javascript">
       new Vue({
       el: "#app",
       data:{
           activeName:1,
           distance:80
       },
       methods:{
           test(i){
               this.distance = 160*i+80
           }
       },
       })

   </script>
</html>