# vue+JavaScript实现slideDown与slideUp效果

最新推荐文章于 2025-01-14 10:26:47 发布

happy-angel

最新推荐文章于 2025-01-14 10:26:47 发布

阅读量1.3k

点赞数 1

文章标签： vue+原生JavaScript实现slideDown与slideUp

原文链接：https://www.cnblogs.com/moqiutao/p/10552736.html

版权

本文介绍如何使用Vue结合JavaScript实现元素的slideDown与slideUp动画效果。通过点击事件触发，动态调整元素高度，实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+JavaScript实现slideDown与slideUp效果

整段代码如下代码片.

// An highlighted block
<template>
  <div style="width:400px;margin:100px auto;">
            <div class="con">
                    <div class="same_module">
                            <div class="title up" @click="slide($event)"><span>标题一</span><i class="arrow"></i></div>
                            <div class="detail" style="height:0">
                                    <div class="inner">
                                            <p>这是一段文本</p>
                                            <p>这是一段文本</p>
                                            <p>这是一段文本</p>
                                            <p>这是一段文本</p>
                                    </div>
                            </div>
                    </div>
            </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        
    }
  },
    methods:{
        slide:function(event){
            let curTarget = event.currentTarget,
                    containsCurClass = curTarget.classList.contains("up"),
                    nextSibling = curTarget.nextSibling;
            while(nextSibling.nodeType == 3 && /\s/.test(nextSibling.nodeValue)){
                nextSibling = nextSibling.nextSibling;
            };
            let detailScrollHeight = nextSibling.scrollHeight;
            if(containsCurClass){
                    curTarget.classList.remove("up");
                    this.toggleSlide(nextSibling,detailScrollHeight,'500');
            }else{
                curTarget.classList.add("up");
                this.toggleSlide(nextSibling,0,'500');
            }
        },
        toggleSlide:function(dom,height,time){
            dom.style.transition = 'height ' + time + 'ms';
            dom.style.height = height + 'px';
        }
    }
}
</script>
<style scoped>
    .same_module{border:1px solid grey;}
    .title{color:#fff;height:30px;line-height:30px;background:blue;padding:0 10px;cursor: pointer;overflow: hidden;}
    .title span{vertical-align:middle;}
    .title .arrow{float: right;}
    .detail{overflow: hidden;}
    .detail .inner{padding:5px 10px;background: #808080;color:#fff;}
    .detail p{line-height: 26px;}
    .arrow{
        display: inline-block;
    border-top: 2px solid;
    border-right: 2px solid;
    width: 8px;
    height: 8px;
    border-color: #EA6000;
    transform: rotate(315deg);
        position: relative;
        transition: all 0.5s ease-in;
        transform-origin: center center;
        top:50%;
        margin-top:-10px;
    }
    .up .arrow{
            transform: rotate(135deg);
    }
    
</style>