Javascript 如何为noUislider.js定义自定义动画？

我在我的网站上实现了noUiSlider，这真是太棒了

但是，我想为处理程序/滑块定义自己的自定义动画。有人知道我必须针对哪些DOM元素才能使滑块更新

aria

，哪些是可能的，哪些是不可能的，以避免破坏库

当我按照文档操作并将动画设置为true并手动更改

的
webkit动画时，
.noUi state tap，.noUi origin
动画不会占用我设置的时间。我在浏览器中调试了它，它似乎没有应用css道具，尽管我将它们突出显示为
！重要信息
。它只需在眨眼之间启动并设置
set
功能（点击按钮）

有什么解决办法吗

滑块

// javascript

function initialSlider() {

    clearInputs ();

    var slider = document.getElementById("slider");

    // Define values
    var initialPrice = 77.99;
    var maxRangeSlider = initialPrice * 4;
    var startBottomSlider = maxRangeSlider/4;
    var startInitialSlider = maxRangeSlider/4;
    var startTopSlider = maxRangeSlider/4;

    // Create slider itself

    noUiSlider.create(slider, {
        animate: true,
        animationDuration: 300,
        start: [startBottomSlider, startInitialSlider, startTopSlider],
        connect: [false, true, true, true],
        range: {
            'min': [0],
            '15%': [initialPrice * 0.85],
            '85%': [initialPrice * 1.15],
            'max': [maxRangeSlider]
        }
    });

    var connect = slider.querySelectorAll('.noUi-connect');
    var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color'];

    for (var i = 0; i < connect.length; i++) {
        connect[i].classList.add(classes[i]);
    }
[..]

---

您的样式

.noUi-state-tap，.noUi-origin

针对两个选择器，

.noUi-state-tap

和

.noUi-origin

。这两者都不足以覆盖默认样式。您应该删除逗号（

，

），如下所示：

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s; // Change this to the desired duration
    transition: transform 0.3s;
}

---

谢谢你的回复！我快到了。现在手柄移动得很好，但是彩色连接提前了。怎么来的？（重建MWE很困难，这是活动滑块：）。您只会覆盖

.noUi origin

的样式。您应该对

.noUi connect

执行相同的操作（请参见答案中的代码片段）。

// javascript set function trigger

const slider = document.getElementById("slider");
slider.noUiSlider.set([66.29, null, 89.69]);

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s; // Change this to the desired duration
    transition: transform 0.3s;
}