Блог

Главная - Вопросы по программированию - Polymer: dom-повтор применяет CSS-переходы к новым элементам, когда массив элементов не сдвигается

Polymer: dom-повтор применяет CSS-переходы к новым элементам, когда массив элементов не сдвигается

#javascript #css #polymer #polymer-3.x

Вопрос:

У меня есть массив, называемый files , который представляет список загрузок файлов, у каждого из которых есть индикатор выполнения. Когда добавляется новый, я вызываю unshift массив:

 this.unshift('files', newFile);

Индикаторы выполнения отображаются в пользовательском интерфейсе с помощью dom-повтора:

 <template is="dom-repeat" items="[[files]]" as="file">
  <upload-file file="[[file]]"></upload-file>
</template>

Индикаторы выполнения имеют переход CSS для сглаживания обновлений значений выполнения. Когда я вызываю unshift, полимер, кажется, добавляет новый <upload file> в конец, а затем повторно применяет свойства к каждому <upload file> . Поскольку unshift добавляет новый элемент в начало массива, а не в конец, значение каждого индикатора выполнения «изменяется» со значения для элемента, который ранее был в этом индексе, на новое значение, вызывая переход CSS для этого изменения. Это особенно заметно, когда файл находится на уровне 100% и добавляется новый файл, в результате чего индикатор выполнения нового файла ненадолго переходит со 100% на 0%. Есть ли способ обойти это поведение? Спасибо за вашу помощь.

Правка: Я придумал обходной путь, хотя это и не красиво. Я добавил наблюдателя в file свойство в UploadFile классе полимерных элементов:

     static get properties() {
        return {
            file: {
                observer: '_fileChanged',
            },
        }
    }

    _fileChanged() {
        this.$['progress-bar'].classList.add('no-transition');
        setTimeout(() => {
            this.$['progress-bar'].classList.remove('no-transition');
        }, 0);
    }

Наборы классов CSS no-transition transition: none .

Метки: ,