Блог

У меня есть компонент v-data-table, который время от времени получает информацию, я хочу анимировать его только при входе, а не при выходе. в vuetify есть встроенные переходы (которые я использую) для этого, но я не могу установить реквизит типа mode и hide-on-leave в этом конкретном сценарии.

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

Вот код моей работы до сих пор: https://codepen.io/willcolmenares/pen/XWKVLNR?editors=1011

и соответствующая часть кода:

 <template v-slot:body="{ items }">
  <tbody name="slide-x-transition" is="transition-group">
    <tr v-for="item in items" :key="item.text">
      <td>
        <div class="text-center">{{ item.text }}</div>
      </td>
    </tr>
  </tbody>      
</template>
  

Можете ли вы дать мне представление о том, как этого добиться?

ну, в итоге я добавил классы css для плавной анимации (отображение отсутствует и абсолютная позиция).. Но мне все еще любопытно, откуда берется name и находится внутри tbody, а также какие другие реквизиты я могу отправить (я не нахожу никакой этой информации в документах vuetify)