Как определить пользовательские анимации для noUislider. js? - PullRequest
Новая
       41

Как определить пользовательские анимации для noUislider. js?

2 голосов
/ 02 мая 2020

Я внедрил noUiSlider в свой веб-сайт, который просто потрясающий.

  1. Однако я хотел бы определить свои собственные анимации для обработчиков / слайдера. Кто-нибудь знает, на какие элементы DOM я нацеливаюсь для обновления ползунка aria, а что возможно, а что нельзя избежать, чтобы сокрушить библиотеку?

  2. Когда я следую за документацию и установите анимацию в true и измените webkit-animation вручную для .noUi-state-tap, .noUi-origin анимация не займет времени, которое я установил. Я отладил его в браузере, и, похоже, он не применяет css -прописки, хотя я выделил их как !important. Он просто запускает и анимирует функцию set (при нажатии кнопки) в мгновение ока.

Есть ли какое-либо решение для этого?

Slider 

// 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]);

enter image description here

1 Ответ

1 голос
/ 03 мая 2020

Ваш стиль .noUi-state-tap, .noUi-origin нацелен на два селектора, .noUi-state-tap и .noUi-origin. Ни один из них конкретный c не достаточен для переопределения стиля по умолчанию. Вы должны удалить запятую (,), например: 

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