Vue 过渡

最新推荐文章于 2025-12-17 14:07:30 发布

原创最新推荐文章于 2025-12-17 14:07:30 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #chrome #javascript

HTML自学历程专栏收录该内容

23 篇文章

订阅专栏

点击按钮控件背景颜色简单过渡变更。

  <style>
/* 
        过渡
*/
        .transtion {
            transition: 3s background-color ease;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }

    </style>

<body>
    <div id="root"></div>
</body>

<script>
    // 创建 vue实例
   const app = Vue.createApp({

    data() {
        return {
            animate: {
                transtion: true,
                blue: true,
                green: false
            }
        }
    },

    methods:{
        handleClick() {
            this.animate.green = !this.animate.green
            this.animate.blue = !this.animate.blue
        }
    },

    template:  `
    <div>
        <div :class="animate">
            hello world!
        </div>
        <button @click="handleClick">
            切换
        </button>
    </div>
    
   `
    });

    const vm = app.mount('#root');
    
</script>

上述实例为简单过渡实例，仅供自己学习参考。

过渡升级版本

 <style>
/* 
        过渡
*/
        .transtion {
            transition: 3s background-color ease;
        }

    </style>

<body>
    <div id="root"></div>
</body>

<script>
    // 创建 vue实例
   const app = Vue.createApp({
    data() {
        return {
            styleObj: {
                background: 'blue'
            }
        }
    },

    methods:{
        handleClick() {
            if (this.styleObj.background === 'blue') {
                this.styleObj.background = 'green'
            } else {
                this.styleObj.background = 'blue'
            }
        }
    },

    template:  `
    <div>
        <div :class="transtion" :style="styleObj">
            hello world!
        </div>
        <button @click="handleClick">
            切换
        </button>
    </div>
    
   `
    });

    const vm = app.mount('#root');
    
</script>