通过javascript更改-webkit-mask-position

Question

我正在开发一个 iPad webview 项目，该项目需要一个滑块在两张图片上来回移动，在向左或向右滑动时显示其中一张。由于项目限制，我无法使用 jQuery。我目前在顶部有一个透明蒙版的左图，当 -webkit-mask-position 增加时，它会显示更多的底部图片，当减少时，会显示更多的顶部（覆盖底部）。

我正在使用一个名为 Draggy (https://github.com/jofan/Draggy) 的 javascript 插件来来回移动滑块，并希望使用它的 onChange 函数调用来更新蒙版的位置，但我不知道 javascript 调用了什么“-webkit-mask-position”来救我的命。

有什么想法吗？

PS：webkitMaskPosition 将 style="-webkit-mask: XX" 添加到我可以使用的元素中（在 js 中填充其他值），但它确实有问题。我现在正在调查。

天哪，我明白了。

var maskSlider = document.getElementById('molecule');
function moveMask(x, y) {
    var xx = x - 285;
    var z = "-webkit-gradient(linear, left center, right center, color-stop(0.5, black), color-stop(0.5, transparent)) no-repeat scroll " + xx + "px padding padding";
    maskSlider.style.webkitMask = z;
}

-285 是让它与滑块在图像上的位置对齐。我不知道我是否真的以正确的方式做这件事，但它奏效了。如果有人能想到更好/更有效的方法来做到这一点，请告诉我。

Answer 1

我最近做了很多关于使用 CSS3 渐变在图像之间进行转换的 webkit 蒙版。 我更喜欢将style 标签附加到head 标签，这是由我的计算动态生成的。而且我也使用了 CSS3 动画。像这样的：

 var cssStr = '<style id="myTransition">.myTransition_wipe{' +
                '-webkit-mask-size: 200% 200%;' +
                '-webkit-mask-repeat: no-repeat;' +
                '-webkit-animation: wipe 2s;' +
                '-webkit-animation-direction: normal;' +
                '-webkit-animation-iteration-count: 1;' +
                '-webkit-animation-fill-mode: forwards;' +
                '-webkit-mask-position: offsetLeftS 0;' +
                '-webkit-mask-image: -webkit-gradient(linear, left top, right top, ' +
                'color-stop(0%, transparent), color-stop(20%, transparent), ' +
                'color-stop(25%, transparent), color-stop(30%, transparent), ' +
                'color-stop(50%, rgba(0, 0, 0, 1)), color-stop(98%, rgba(0, 0, 0, 1)), ' +
                'color-stop(100%, rgba(0, 0, 0, 1)));}' +
                '@-webkit-keyframes wipe {' +
                '0% { -webkit-mask-position: offsetLeftS 0; }' +
                '100% { -webkit-mask-position: offsetLeftD 0; }' +
                '}' +
                '</style>';
            var compStyle = getComputedStyle(currentElement);
            var width = parseInt(compStyle.getPropertyValue("width"));
            var height = parseInt(compStyle.getPropertyValue("height"));
            cssStr = cssStr.replace(/offsetLeftS/g, '-' + (width * 1) + 'px');
            cssStr = cssStr.replace(/offsetLeftD/g, '+' + (width * 1) + 'px');

            $('head').append(cssStr);

当我想应用转换时，我通过其 ID 删除 style 标记并从元素中删除类 myTransition_wipe，然后将一个新的附加到 head 标记并将类名也添加到元素.

注意：你必须存储动画完成后元素应该具有的样式，并在动画完成后立即添加它们。否则，当你删除类名和样式标签时，一切都会被重置。

祝你好运