Как реализовать функцию группы переходов Vue в Elm?

синий

Мы рассматриваем возможность перехода с Vue на Elm для проекта, который во многом зависит от функции группы перехода Vue . Наш вариант использования - это упрощенная версия примера перемешивания (см. Ссылку выше для демонстрации): если позиции двух элементов в списке меняются местами в модели, элементы DOM должны плавно поменять местами свои позиции посредством перехода. Еще пример из документации:

введите описание изображения здесь

Как лучше всего добиться такого же эффекта в Elm? Мы не можем использовать абсолютное позиционирование (+ жесткое кодирование геометрии в модели), потому что в целом макет по-прежнему опирается на стандартные функции браузера CSS +. Также не совсем ясно, может ли эта функциональность быть достигнута с помощью портов или потребуется низкоуровневый контроль над визуализацией виртуальной DOM.

ZacharyB

Насколько мне известно, нет способа получить доступ к низкоуровневым событиям рендеринга в пакете Html или Virtual DOM Elm.

Тем не менее, Elm поддерживает связь через порт, поэтому вы должны иметь возможность добавить эту возможность в свое приложение, чтобы анимация запускалась через порты.

Я собрал здесь образец: https://ellie-app.com/jcCqXrC52a1/1

Здесь используется тот же общий подход, что и во Vue, но используется библиотека JS, на которую они ссылаются в своих документах, https://github.com/GoogleChrome/flipjs

Эта статья взята из Интернета, укажите источник при перепечатке.

Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.

Отредактировано в
0

я говорю два предложения

0обзор
Войти в системуУчаствуйте в комментариях

Статьи по теме

Как читать подпись типа Elm с параметром типа в нижнем регистре?

Условные выражения: каков синтаксис многострочного оператора if в Elm?

Понимание возвращаемых типов сигнатуры типа Elm

ELM - список строк таблицы

Может ли функция Elm иметь строку документации?

Как в Elm перебирать карту?

Как я могу прочитать локальный файл в Elm?

ELM передается по ссылке или по значению?

Требуется помощь по синтаксису Elm

Допускает ли Elm круговые ссылки?

Как перебирать список в представлении Elm?

Проверка типа псевдонима типа elm не выполняется, почему он компилируется?

Необходимо создать декодер, который создает запись из данных на родительском уровне и прикрепляет ее ко всем дочерним записям в elm

ELM обновляет два поля в модели

Пользовательские элементы ELM

Локальное хранилище или другое сохранение данных в elm

Мок-зависимость в Elm

Добавление тех же параметров в список функций в Elm

Синтаксис Elm для генерации переменных и функций: как отличить?

Преобразование списка в кортеж в Elm

Лучший способ переместить элемент списка Elm

Изменить модель виджета от родительской в Elm

Упрощение двухпараметрической анонимной функции в Elm

Как создать переменную даты в Elm

Какие версии пакетов elm установлены?

Сокращенное обозначение записи Elm

Исходный код пакета Elm

Как обнаружить сбой при загрузке изображения в Elm

Есть ли в Elm параллелизм?

TOP список

  1. 1

    Распределение Рэлея Curve_fit на Python

  2. 2

    TypeError: store.getState não é uma função. (Em 'store.getState ()', 'store.getState' é indefinido, como posso resolver esse problema?

  3. 3

    Как добавить Swagger в веб-API с поддержкой OData, работающий на ASP.NET Core 3.1

  4. 4

    (fields.E300) Поле определяет связь с моделью, которая либо не установлена, либо является абстрактной.

  5. 5

    В типе Observable <unknown> отсутствуют следующие свойства из типа Promise <any>.

  6. 6

    How to click an array of links in puppeteer?

  7. 7

    Перебирайте несколько столбцов в фрейме данных Panda и находите уникальные значения подсчета

  8. 8

    Merging legends in plotly subplot

  9. 9

    ViewPager2 мигает / перезагружается при смахивании

  10. 10

    Текущая ветка не настроена для извлечения В конфигурации не найдено значение для ключа branch.master.merge

  11. 11

    How to normalize different curves drawn with geom = "step" when using stat_summary

  12. 12

    SQL Вычтите две строки друг от друга в одном столбце, чтобы получить результат

  13. 13

    Метод ошибки Illuminate \\ Database \\ Eloquent \\ Collection :: save не существует. в Laravel

  14. 14

    Ошибка «LINK: фатальная ошибка LNK1123: сбой при преобразовании в COFF: файл недействителен или поврежден» после установки Visual Studio 2012 Release Preview

  15. 15

    JavaFX TextArea как установить текст с автоматическим переносом новой строки

  16. 16

    Как я могу нарисовать заполненный прямоугольник в JFreeChart?

  17. 17

    как я могу удалить vue cli 2?

  18. 18

    Отчеты Fabric Debug Craslytic: регистрация, отсутствует идентификатор сборки, применить плагин: io.fabric

  19. 19

    Elasticsearch - Нечеткий поиск не дает предложения

  20. 20

    Метки значений столбцов BarChart скрыты полем

  21. 21

    Ошибка Phusion Passenger с Rails 4 и Ruby 2.5

популярныйтег

файл