Как вы исчезаете в div в Svelte при изменении контента?

Как вы исчезаете в div в Svelte при изменении контента? У меня есть один список для опубликованных текстов и другой для черновиков. Я знаю, как это сделать с помощью простого javascript, но есть ли решение для этого в svelte, помимо загрузки страницы?

async function published() {
    lipub.style.backgroundColor = "#CCC";
    lidraft.style.backgroundColor = "transparent";
    const response = await fetch("api/mytexts/?id = " + $session.userID);
    result = await response.json();
    return result;
  }

  async function drafts() {
    lipub.style.backgroundColor = "transparent";
    lidraft.style.backgroundColor = "#CCC";
    const response = await fetch("api/mytexts/drafts?id = " + $session.userID);
    result = await response.json();
    return result;
  }

<div>
<div id = "headerblock" style = "cursor: default;">
    <ul id = "headermenu">
      <li class = "selected" on:click = {published} bind:this = {lipub}>Published</li>
      <li on:click = {drafts} bind:this = {lidraft}>Drafts</li>
      <li on:click = {newtext}>{$_("page.newtext.title")}</li>
    </ul>
  </div>

    {#if result}

      <div fade-in-this-when-new-result>

      {#each result as text}
        <div class = "block" on:click = {() => readData(text.id)}>
          <span class = "istext">{text.title}</span>
        </div>
      {/each}

     </div>

    {/if}

</div>

РЕДАКТИРОВАТЬ Это работает, когда я сбрасываю результат между ними.

У вас есть посмотрел документы?

H.B. 04.05.2022 13:19

@Х.Б. Конечно. Не работает. Он работает при добавлении в div class=block, но это не то, что мне нужно.

Pål Bergström 04.05.2022 14:02

Что ты имеешь в виду? Класс не имеет ничего общего с этой функциональностью.

H.B. 04.05.2022 14:26

Была просто ссылкой на то, где в моем коде. Работает, когда я сбрасываю результат между ними.

Pål Bergström 04.05.2022 14:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете вызвать повторное создание блока, запуская переходы, используя {#key}, например.

{#key list}
    <div in:fade = {{ duration: 300 }}>
        {#each list as item}
            <div>{item}</div>
        {/each}
    </div>
{/key}

РЕПЛ

Другие вопросы по теме