vue使用transition实现Jq的slideTrogger滑动效果

最新推荐文章于 2024-05-30 11:27:58 发布

菜菜琴琴子.

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量258

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44254042/article/details/130154114

版权

vue通过点击实现如同jquery的slideTrogger展开，折叠的滑动效果，如下图

实现代码如下

template模板里面的代码

<template>
    <div class="menu_left">
        <div
            class="type_box"
            v-for="(item,index) in menuData"
            :key="index"
            @click="selectItem(item,index)"
        >
            <div class="first_type">{{item.type}}</div>
            <transition name="moveing">
                <ul
                    v-show="item.open"
                    class="second_type"
                >
                    <li
                        v-for="subItem in item.typeClass"
                        :key="subItem"
                    >{{subItem}}</li>
                </ul>
            </transition>
        </div>
    </div>
</template>

script代码

export default {
    data() {
        return {
            menuData: [
                {
                    type: "11111",
                    open: false,
                    typeClass: ["11111-1", "11111-2", "11111-3", "11111-4"],
                },
                {
                    type: "22222",
                    open: false,
                    typeClass: ["22222-1", "22222-2", "22222-3", "22222-4"],
                },
            ],
        }
    },
    methods: {
        selectItem(item, index) {
            this.menuData[index].open = !this.menuData[index].open
        },
    },
}

css代码（scss）

.menu_left {
            width: 150px;
            height: 100%;
            background-color: #215476;
            .type_box {
                cursor: pointer;
                color: #fff;
                text-align: center;
                .first_type {
                    background-color: green;
                    padding: 5px 0;
                    margin: 5px 5px 0 5px;
                    &:hover {
                        color: orangered;
                        background-color: pink;
                    }
                }

                .moveing {
                    /* 设置过渡，只过渡maxheight */
                    &-leave-active,
                    &-enter-active {
                        transition: max-height 0.6s;
                    }
                    /* 使其动作enter后和leave前，高度为0 */
                    &-leave-to,
                    &-enter {
                        max-height: 0px;
                    }
                    /* 使其enter前和leave后，高度为150px */
                    &-enter-to,
                    &-leave {
                        max-height: 120px;
                    }
                }

                .second_type {
                    background-color: #071e47;
                    margin: 0 5px 5px 5px;
                    overflow: hidden;
                    li {
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }
        }

记录一下：使用vue的Transition结合css3学习实现jquery的滑动展开和收起功能。

参考学习

Transition | Vue.js

[Vue][transition]Vue中实现类似JQuery中slideUp slideDown的滑动显示隐藏过渡动画效果_vue slidedown_AI Thabo的博客-CSDN博客