vue中元素高度auto的收起展开动画

最新推荐文章于 2024-04-11 15:07:41 发布

sdfujichao

最新推荐文章于 2024-04-11 15:07:41 发布

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sdfujichao/article/details/89188716

javascript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用CSS3的transition属性来创建元素的展开与收起动画效果。通过设置元素的固定高度并利用Vue.js的DOM操作，实现平滑过渡的动画效果。文章详细解释了在动画前手动设置元素高度的重要性，以及如何通过监听DOM更新来获取并应用正确的高度。


<!-- 
**** 说明：
****   使用css3的transition动画来做
****	但是这个属性只能用于固定高度的元素，所有在进行动画之前就要手动的给这个元素设置一个高度值，这样就能正常使用动画了
****
****
-->
<template>
    <div>
        <button @click="fun_animate">
            <span v-if="!is_show">展开</span>
            <span v-if="is_show">收起</span>
        </button>
        <div class="child_right_slider transition_dom" ref="box">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</template>
<script>
var _this = null;
export default {
    data() {
        return {
            is_show: true,
            height: ""
        };
    },
    methods: {
        fun_animate: function() {
            if (_this.is_show) {
                this.$refs.box.style.height = "0";
            } else {
                this.$refs.box.style.height = _this.height;
            }
            _this.is_show = !_this.is_show;
        },
        fun_get_list: function() {
            // 1：网络请求获取数据后会把元素自动撑开，我们要做的就是让这个元素做展开收起动画
            // 做法： 1：获取这个元素的高度
            //        2:吧获取的高度赋值给这个元素，这样这个元素就是高度固定的了。nextTick用于dom刷新后执行
            _this.$nextTick(function() {
                var height = _this.$refs.box.offsetHeight;
                console.log(height);
                this.$refs.box.style.height = height + "px";
                _this.height = height + "px";
            });
        }
    },
    mounted() {
        _this = this;
        _this.fun_get_list();
    }
};
</script>

<style lang="scss">
.transition_dom {
    transition: all 0.3s linear 0s;
}
.child_right_slider {
    display: inline-block;
    width: 300px;
    background-color: black;
    color: white;
}
</style>