Size: a a a

2021 February 24

AO

Alex Okrushko in Angular Kyiv
Vladimir
@AlexOkrushko Алекс привет. Вот начал использовать component-store. Интересный подход.

Вопрос: можно ли добиться чтобы в эффекте не было параметра ? Оно срабатывает, но только один раз.

Например, fetchAllUsers
Можно. :)
readonly myEffect = this.effect(trigger$ => trigger$.pipe(...))

Вызов this.myEffect()
источник

AC

Alex Chugaev in Angular Kyiv
Tamila Bodnar
логіка - поставити потрібний мені компонент на 1 місце - написала, ще хочу анімувати, шукаю гарне рішення
задачка не тривіальна... тобто обраний елемент виринає зі списку і взлітає на перше місце, а решта зсуваються донизу, так?
источник

TB

Tamila Bodnar in Angular Kyiv
дякую, ще подумаю
источник

AC

Alex Chugaev in Angular Kyiv
Tamila Bodnar
дякую, ще подумаю
там ще уточнення 👆
источник

TB

Tamila Bodnar in Angular Kyiv
Alex Chugaev
задачка не тривіальна... тобто обраний елемент виринає зі списку і взлітає на перше місце, а решта зсуваються донизу, так?
саме так
источник

AC

Alex Chugaev in Angular Kyiv
Alex Okrushko
Можно. :)
readonly myEffect = this.effect(trigger$ => trigger$.pipe(...))

Вызов this.myEffect()
А, власне функція, яку ти передаєш в .effect і має за задумкою викликатись один раз.
Її задача - створити поток на основі значень (які пушаться при кожному виклику ефекта) і пропустити то значення через потрібні оператори
источник

AC

Alex Chugaev in Angular Kyiv
Tamila Bodnar
саме так
1. у списку має бути position: relative
2. у анімованого елемента робим на старті position: absolute
3. Кажем йому плавно рухатись до top: 0
4. Коли доїде до верху, видалити зі старої позиції і вставити на нульову
5. Для натуральності можна погратись з фейковими тимчасовими елементами, які триматимуть простір для елемента нагорі, поки він не "доїде" нагору і стане на їх місце.
источник

TB

Tamila Bodnar in Angular Kyiv
спробую, дякую
источник

V

Vladimir in Angular Kyiv
Alex Okrushko
Можно. :)
readonly myEffect = this.effect(trigger$ => trigger$.pipe(...))

Вызов this.myEffect()
Да, благодарю. Была такая идея. Но не успел испробовать 😊
источник

AC

Alex Chugaev in Angular Kyiv
Tamila Bodnar
спробую, дякую
Ще ідея спробувати анімувати через flex order і transition. Але це пальцем в небо, я так не пробував.
источник

TB

Tamila Bodnar in Angular Kyiv
👌
источник

DT

Denchik Tymokhin in Angular Kyiv
Alex Chugaev
Ще ідея спробувати анімувати через flex order і transition. Але це пальцем в небо, я так не пробував.
я так пробовал... но для управления надо в инлайн загонять
источник

AC

Alex Chugaev in Angular Kyiv
Denchik Tymokhin
я так пробовал... но для управления надо в инлайн загонять
А воно дійсно анімує?
источник

DT

Denchik Tymokhin in Angular Kyiv
надо потестить анимацию
источник

DT

Denchik Tymokhin in Angular Kyiv
а так работает
источник

AC

Alex Chugaev in Angular Kyiv
Denchik Tymokhin
а так работает
Є передчуття, що це працюватиме як transition по z-index - ривками
источник

DT

Denchik Tymokhin in Angular Kyiv
Alex Chugaev
Є передчуття, що це працюватиме як transition по z-index - ривками
источник

DT

Denchik Tymokhin in Angular Kyiv
2 пример по-счету
источник

DT

Denchik Tymokhin in Angular Kyiv
вроде без рывков
источник

AC

Alex Chugaev in Angular Kyiv
І тут мені стало цікаво про CSS Grids. Чи вміють вони таке, але плавно і з коробки?
источник