vuejs代码-状态过渡

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1375322/blog/1586597

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue.js结合Tween.js实现颜色输入框实时预览颜色渐变效果，通过监听颜色变化并应用Tween.js进行平滑过渡，展示了一个动态更新背景色的示例。

这个地方以后回来再看看

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>状态过渡</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="E:/JavaScriptLibrary/vue.js"></script>
    <script src="E:/JavaScriptLibrary/tweenjs.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
    <style>
    .eg-color {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
    </style>
</head>

<body>
    <div id="eg">
        <input v-model="colorQuery" @keyup.enter="updateColor" placeholder="enter a color">
        <button @click="updateColor">update</button>
        <p>preview:</p>
        <span :style="{backgroundColor:tweenedCSSColor}" class="eg-color"></span>
        <p>
            {{tweenedCSSColor}} </p>
    </div>
    <script>
    //color.js中的
    var Color = net.brehaut.Color
    new Vue({
        el: '#eg',
        data: {
            colorQuery: '',
            color: {
                red: 0,
                green: 0,
                blue: 0,
                alpha: 1
            },
            tweenedColor: {}
        },
        created: function() {
            this.tweenedColor = Object.assign({}, this.color)
        },
        watch: {
            color: function() {
                function animate() {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate)
                    }
                }
                new TWEEN.Tween(this.tweenedColor)
                    .to(this.color, 750)
                    .start()

                animate()
            }
        },
        computed: {
            tweenedCSSColor: function() {
                return new Color({
                    red: this.tweenedColor.red,
                    green: this.tweenedColor.green,
                    blue: this.tweenedColor.blue,
                    alpha: this.tweenedColor.alpha
                }).toCSS()
            }
        },
        methods: {
            updateColor: function() {
                this.color = new Color(this.colorQuery).toRGB()
                this.colorQuery = ''
            }
        }
    })
    </script>
</body>

</html>

转载于:https://my.oschina.net/u/1375322/blog/1586597