yandex-ui / noscript

Noscript: JavaScript MVC Framework for building SPA
http://yandex-ui.github.io/noscript/
MIT License
34 stars 22 forks source link

[ns.View] Поддержка анимации у видов #598

Closed chestozo closed 8 years ago

chestozo commented 8 years ago

Тут такая идея про то, как анимировать вид перед скрытием:

ns.View.define('some-view', {
    animateBeforeHide: function() {
        var promise = doSomeAnimation();
        return promise;
    }
});

и в коде там где у нас нода вида / бокса меняется сделать вместо:

this.$node
    // события
    .off()
    // данные
    .removeData()
    // удаляем из DOM
    .remove();

сделать так:

var $oldNode = this.$node;
$oldNode.off(); // события
this. animateBeforeHide().then(function() {
    $oldNode
        // данные
        .removeData()
        // удаляем из DOM
        .remove();
});

/cc @shirokoff @Katochimoto @vitkarpov

vitkarpov commented 8 years ago

+1

fresk-nc commented 8 years ago

+1

chestozo commented 8 years ago

Попробую запилить демку в noscript-demo )

chestozo commented 8 years ago

Запилил заход. Пока кажется, что будет не хватать какой-то информации для принятия решения, нужна ли анимация. К примеру, предыдущий / текущий page.

Как вариант, пока можно было бы подписаться на событие ns-page-before-load и там принимать решение.

vitkarpov commented 8 years ago

@chestozo а поправишь код-стайл? а то тесты падают в трависе, не запустив сами тесты :)

chestozo commented 8 years ago

Мы в итоге обошлись таким подходом:

view-slider
  |_view-slide-1
  |_view-slide-2
  |_view-slide-3

Есть state-модель slider-state, у неё есть .active-slide-id. Все виды (view-container, view-slide-1, view-slide-2, view-slide-3) зависят от slider-state и слушают изменение .active-slide-id, но при этом выполняют keepValid.

А дальше мы вешаем / снимаем классы в зависимости от того, какой слайд надо отобразить. Это конечно частный случай, но он работает )

vitkarpov commented 8 years ago

А как ты хотел в данном кейсе использовать предложенное АПИ анимаций?

chestozo commented 8 years ago

Я это issue запилил до того, как мы придумали вот так вот анимировать переключение видов. Ну т.е. в данном случае мы реализовали подход "все виды отображаются всегда, только часть скрыта; анимация переключения видов - ручным set-ом класса". На полноценное решение этот подход не тянет )

vitkarpov commented 8 years ago

Да, и мы так делали. Минус этого подхода в том, что все виды отображаются всегда — это приводит, например, к тому что условная загрузка чего-то, что неплохо было бы делать только на ns-view-show начинается для всей коллекции в порции.

vitkarpov commented 8 years ago

Так же такой подход быстро забывается. Новый разработчик приходит в эту коллекцию и начинает писать что-то на ns-view-show, ожидая, что тот будет выполняться при реальном показе. Но нет :)

vitkarpov commented 8 years ago

@chestozo закрываем пул, в итоге? Кажется, что эта история уже готова, раз пока нет необходимости.

chestozo commented 8 years ago

Закрываем до очередного запроса )