时间戳

首页 > 解决方案 > 为什么 CSS 转换（通过 Javascript）不能使用多个函数

javascript - 为什么 CSS 转换（通过 Javascript）不能使用多个函数

问题描述

非常简单的问题，我有一个使用变换来移动/缩放/旋转的相机，我希望这一切都在 GPU 上完成（所以，使用变换）。使用一次转换 ( translate())，它可以正常工作并且没有问题。但是，如果我添加其他 2，它会突然变成一个空字符串：

namespace `game.modules`(
    class Camera{
        constructor(tag){
            this.tag = tag;
            this.x = 0;
            this.y = 0;
            this.rotation = 0;
            this.scaleX = 1;
            this.scaleY = 1;
            this.animations = []
        }

        lookAt(object){
            this.x=object.x;
            this.y=object.y;
        }

        
        onDraw(){
            this.setTagFromData();
        }

        setTagFromData(){
            var x = -(this.x-100);
            var y = -(this.y-60);
            this.tag.style.transform = `translate3d(${x}px, ${y}px, 0px)`
            console.log(this.tag.style.transform)
        }
    }
)

这将输出预期的字符串 ( translate3d(50px, 50px, 0px))。但是，像这样添加其他属性：

namespace `game.modules`(
    class Camera{
        constructor(tag){
            this.tag = tag;
            this.x = 0;
            this.y = 0;
            this.rotation = 0;
            this.scaleX = 1;
            this.scaleY = 1;
            this.animations = []
        }

        lookAt(object){
            this.x=object.x;
            this.y=object.y;
        }

        
        onDraw(){
            this.setTagFromData();
        }

        setTagFromData(){
            var x = -(this.x-100);
            var y = -(this.y-60);
            this.tag.style.transform = `translate3d(${x}px, ${y}px, 0px) rotate(${this.ang}deg) scale(${this.scaleX}, ${this.scaleY})`
            console.log(this.tag.style.transform)
        }
    }
)

记录一个空字符串，甚至不记录translate3d(). 为什么会这样？

标签： javascriptcssstyles

解决方案

正如您在评论中确认的那样：

由于this.ang未定义，生成的字符串中包含单词undefined，因此它是无效的 CSS 表达式。众所周知，CSS 会忽略无效表达式，因此整个字符串都会被丢弃。

推荐阅读