如何在GWT 2.5中应用CSS3样式

Question

我想将CSS3转换样式应用于GWT中的图像。例如

imageZoom.getElement().getStyle().setProperty("-webkit-transform", "translate3d("+x+"px, "+y+"px, 0px)");

其中x、y为鼠标光标在图像中的坐标。它将错误显示为
由java.lang.AssertionError引起:样式名称应该是驼峰大小写格式。
我将style属性重命名为

1. -webkit-transform -webkit-transform 2.

3. -webkit-transform

我也使用了CamelCase转换器，但它显示的结果与输入的结果相同。

Thanks in Advance

Answer 1

我不确定具体是GWT，但在JavaScript中，使用前缀时可以删除连字符。webkit和ms是小写的，而O和Moz是大写的。下面是一些通过JavaScript在WebKit中设置转换的代码:

var el = document.getElementById("test");
el.style.webkitTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

这里是其他前缀和无前缀。请注意，无前缀以小写字母开头:

el.style.MozTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.msTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.OTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.transform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

下面是它的实际演示:http://jsfiddle.net/qScux/

编辑:

在GWT中，这是:

imageZoom.getElement().getStyle().setProperty("webkitTransform", "translate3d("+x+"px, "+y+"px, 0px)")

Answer 2

下面是GWT检查驼峰大小写的代码:

private void assertCamelCase(String name) {
    assert !name.contains("-") : "The style name '" + name
    + "' should be in camelCase format";
}

因此，实现目标的可能方法是设置style，而不是style的属性:

imageZoom.getElement().setAttribute("style", "-webkit-transform: translate3d("+x+"px, "+y+"px, 0px)");

也可以先获取样式，将其设置为toString，然后添加此属性并将样式分配给元素