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

Question

我在自己的网站上实现了noUiSlider，这太棒了。

1. 但是，我想为处理程序/滑块定义自己的自定义动画。有谁知道我要定位以更新滑块aria的DOM元素，有什么可能和什么避免避免破坏lib？

2. 当我遵循文档并将动画设置为true并为webkit-animation手动更改.noUi-state-tap, .noUi-origin时，动画不会花费我设置它的时间。我在浏览器中对其进行了调试，即使我将其突出显示为!important，它似乎也不适用css-props。只需眨一下眼，它便会触发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]);
    }
[..]

// CSS

.noUi-state-tap, .noUi-origin {
    -webkit-transition-delay: 50ms !important;
    -webkit-transition-duration: 300ms !important;
}

// javascript set function trigger

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

Answer 1

您的样式.noUi-state-tap, .noUi-origin面向两个选择器.noUi-state-tap和.noUi-origin。 specific都不足以覆盖默认样式。您应删除逗号（,），如下所示：

.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;
}