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

Question

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

1. 但是，我想为处理程序/滑块定义我自己的自定义动画。有谁知道我必须定位哪些 DOM 元素才能使滑块更新aria 以及什么是可能的，什么是不可以避免破坏库的？

2. 当我按照文档将动画设置为 true 并手动更改 webkit-animation 为 .noUi-state-tap, .noUi-origin 时，动画不会花费我设置的时间。我在浏览器中调试了它，它似乎没有应用 css-props，即使我将它们突出显示为!important。它只是在眨眼之间触发并激活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;
}