2

我在我的网站中实现了 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]);

在此处输入图像描述

4

1 回答 1

1

您的样式.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;
}
于 2020-05-03T09:22:26.597 回答