Vue 滚动条动画

Posted 2021-03-22 1032473245jing

<template>
    <div class="home-main">
        <div class="progress-main">
            <div class="progress-content" :style="{width: width100}"></div>
        </div>
    </div>
</template>

<script>

export default {
    name: ‘home‘,
    data() {
        return {
            width100: 0,
        };
    },
    mounted() {
        setTimeout(() => {
            this.width100 = ‘80%‘;
        }, 100);
    },
};
</script>

<style lang="stylus" scoped>
.home-main
    width 100%
    height 100%
    overflow hidden
    position relative
    .progress-main{
        border-radius 100px
        background-color #ebeef5
        overflow hidden
        position relative
        width 200px
        height 10px
        margin 20px 0 0 20px
        .progress-content{
            position absolute
            left 0
            top 0
            height 100%
            background-color #409eff
            border-radius 100px
            transition width 1s ease
        }
    }
</style>