Vue结合animate动画库实现选项卡

先看效果：
在这里插入图片描述
利用animate的动画效果实现，看代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/animate.css" />
    <style>
        #box {
            overflow: hidden;
        }

        span {
            /* float: left; */
            display: inline-block;
            width: 80px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            margin: 10px;

        }

        .active {
            border-bottom: 3px solid #ccc;
            color: #ccc;
            background-color: rgba(45, 144, 151, 0.74);
            border-radius: 5px;
        }

        .content {
            margin-top: 10px;
            clear: both;
            width: 460px;
            height: 300px;
            background-color: rgba(150, 57, 173, 0.411);
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body>
    <div id="box">
        <span v-for="(item,i) in list" :class="[ index == i ? 'active animate__animated animate__bounceIn' : '']"
            :key="item" @click="click(i)">{{item}}</span>
        <div v-for="(item,i) in lists" class="content" :class="index == i ? 'animate__animated animate__rubberBand' : ''"
            :key="item" v-show="index == i">
            {{item}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                list: ["tab1", 'tab2', 'tab3', 'tab4','tab5'],
                lists:["什么是同源策略","同源策略就是","当两个页面协议、端口、和域名都相同","则两个页面 具有相同的源","这就是同源策略"],
                index: 0,
            },
            methods: {
                click(i) {
                    // console.log(i)
                    this.index = i
                }
            }
        })
    </script>
</body>

</html>
Vue结合animate动画库实现选项卡

猜你喜欢
