Проблема с переключателем направления Svelte

Я использую блок each для итерации по массиву элементов и блок if внутри него, чтобы проверить, какие из элементов должны быть показаны, а переход fly применяется к внутренним элементам с переменной, которая контролирует направление переход так, что если пользователь нажимает следующий, все идет и входит из ‹- таким образом, а если они нажимают предыдущую кнопку, все идет и входит из -› таким образом.

Он отлично работает, за одним исключением. Когда пользователь идет в одном направлении, а затем щелкает в другом направлении, выходная анимация для текущего показанного элемента идет в неправильном направлении, но только на первой выходящей анимации, а затем падает в линию. Вот REPL проблемы: https://svelte.dev/repl/1aa3608458f84a4fb4d93b10b47ae3f1?version=3.25.0

Есть ли способ заставить первую анимацию Outro идти правильным путем после смены направления? Я чувствую, что чего-то не вижу.

Изменить:

Существует проблема Github, которая в некоторой степени связана с этой проблемой.

Как я отмечал в проблеме Github, похоже, что такое поведение влияет только на элементы внутри блока each. Этот REPL показывает поведение, работающее должным образом с динамическими направлениями x.

Я придумал этот обходной путь, где я перемещаю переход к родительскому элементу блок each и продублируйте его, а затем выберите альтернативный блок each.

Я хотел бы узнать, есть ли лучший способ обхода, поскольку дублирование болезненно. В противном случае я просто сделаю его компонентом и спрячу от стыда.


svelte svelte-3
person JHeth    schedule 12.09.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я считаю, что причина такого поведения заключается в том, что вы определяете функцию out до того, как узнаете направление, в котором идет out, следовательно, в неверном направлении, если вы меняете направление.
Вы можете определить свою собственную функцию для out. и он запускается, когда вы выбираете направление, и поэтому у вас есть правильное направление, доступное в вашей собственной функции.
Я не уверен, что мое объяснение правильное, но вот рабочий пример:

const myOut=(el)=>{
  return fly(el,{x:-x, duration:600})
}

И в div:

out:myOut|local
person grohjy    schedule 13.09.2020
comment
Спасибо за ответ, но я не знаю, насколько это связано с реальной проблемой, с которой я столкнулся. Я добавил новую информацию к вопросу, кажется, что это происходит только внутри каждого блока по какой-то странной причине. - person JHeth; 13.09.2020
comment
Вы правы, похоже, проблема связана с each. Мое решение работает, и я считаю, что это связано с тем, что x каким-то образом вынужден обновлять правильное значение перед запуском out. - person grohjy; 13.09.2020
comment
Вау, ваше решение действительно работает. Извините, я не пробовал это до сих пор. Я даже пошел и сделал целый компонент для переключения между двумя одинаковыми слотами. - person JHeth; 13.09.2020
comment
Рад слышать, что это помогло. Мне не удалось получить доступ к параметрам анимации из outrostart. Я считаю, что outrostart было бы идеальным временем для изменения свойств анимации непосредственно перед началом out. - person grohjy; 13.09.2020