Мобильная версияКак добавить анимацию и отобразить в таблице вновь добавленную строку, сохранив при этом все остальные стили строк? ⇐ CSS
-
Anonymous
Как добавить анимацию и отобразить в таблице вновь добавленную строку, сохранив при этом все остальные стили строк?
Я использую @revolist/vue3-datagrid в своем приложении на базе Nuxt 3 или Vue 3 и добавляю к нему строку одним нажатием кнопки.
Когда я добавляю новую строку, я хочу добавить своего рода переход/анимацию, чтобы вновь добавленная строка отображалась с анимацией, а остальная часть оставалась прежней, а цвет фона вновь добавленной строки на секунду меняется на зеленый или другой цвет, а затем мигает, показывая пользователю, что он был добавлен недавно. Я хочу знать, возможно ли этого добиться с помощью tailwind css или нужно, как этого добиться?
Ниже приведен код моего приложения на базе nuxt 3 или vue 3: страницы/test.vue:
Добавить ряд импортировать VGrid из «@revolist/vue3-datagrid»; const rowCount = ref(3); const columns = useState("columns", () => [ { реквизит: "ID", имя: "Идентификатор", }, { реквизит: "Событие", название: "Событие", }, { реквизит: «Параметры», имя: «Параметры», }, ]); const rows = useState("rows", () => [ { Идентификатор: «1», Событие: «Событие 1», }, { Идентификатор: «2», Событие: «Событие 2», }, ]); const addRow = () => { константная строкаObj = { Идентификатор: rowCount.value, Событие: "RowValue: " + rowCount.value, }; rows.value.push(rowObj); rowCount.value++; }; рево-сетка { высота: 500 пикселей; } .header-rgRow { @apply dark:текст-белый текст-черный; } .rgCell { @apply dark:текст-белый текст-черный; } .rgRow { @apply dark:текст-белый текст-черный; } Может кто-нибудь подсказать мне, как добавить анимацию и вспышку к вновь добавленной строке, оставив все остальное как есть?
Я использую @revolist/vue3-datagrid в своем приложении на базе Nuxt 3 или Vue 3 и добавляю к нему строку одним нажатием кнопки.
Когда я добавляю новую строку, я хочу добавить своего рода переход/анимацию, чтобы вновь добавленная строка отображалась с анимацией, а остальная часть оставалась прежней, а цвет фона вновь добавленной строки на секунду меняется на зеленый или другой цвет, а затем мигает, показывая пользователю, что он был добавлен недавно. Я хочу знать, возможно ли этого добиться с помощью tailwind css или нужно, как этого добиться?
Ниже приведен код моего приложения на базе nuxt 3 или vue 3: страницы/test.vue:
Добавить ряд импортировать VGrid из «@revolist/vue3-datagrid»; const rowCount = ref(3); const columns = useState("columns", () => [ { реквизит: "ID", имя: "Идентификатор", }, { реквизит: "Событие", название: "Событие", }, { реквизит: «Параметры», имя: «Параметры», }, ]); const rows = useState("rows", () => [ { Идентификатор: «1», Событие: «Событие 1», }, { Идентификатор: «2», Событие: «Событие 2», }, ]); const addRow = () => { константная строкаObj = { Идентификатор: rowCount.value, Событие: "RowValue: " + rowCount.value, }; rows.value.push(rowObj); rowCount.value++; }; рево-сетка { высота: 500 пикселей; } .header-rgRow { @apply dark:текст-белый текст-черный; } .rgCell { @apply dark:текст-белый текст-черный; } .rgRow { @apply dark:текст-белый текст-черный; } Может кто-нибудь подсказать мне, как добавить анимацию и вспышку к вновь добавленной строке, оставив все остальное как есть?
