Как закрепить центральный блок?

Question

[Young11]

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

Comments

[Alex_mos]

v-if вы применяете к блоку ul и скрываете его, соответственно и все его содержимое (если я не ошибаюсь)

[Young11]

Alex_mos, да , лучше сделать просто не через v-for и присвоить для каждого v-if ?

Answer 1

[0xD34F]

Вместо заворачивания ul в transition следует завернуть li в transition-group:

<transition-group tag="ul" name="fade" class="buttons">
  <li
    v-if="какое здесь будет условие, предлагаю подумать самостоятельно"
    ...

Comments

[Alex_mos]

Тогда нужно v-for не на li делать

[Young11]

<transition-group tag="ul" name="fade" class="buttons">
        <teamplate v-for="( item, index ) in items">   
              <li v-if> </li>
        </teamplate>
</transition-group>

Как-то так получается лучше сделать ?

[0xD34F]

Alex_mos, всё-таки на li.

Young11, как-то так. Как-то.

[Alex_mos]

0xD34F, вроде v-for вместе с v-if нежелательно использовать на одном элементе

[Young11]

Из-за чего у меня не отображается блок 4444 ?

[0xD34F]

Alex_mos, нежелательно. Но до подобных "тонкостей" автору вопроса как до Луны пешком, пусть сперва хоть что-то хоть как-то научится делать.

[0xD34F]

Young11, верните код в песочнице обратно - какой он был на момент публикации вопроса. Новый код - новая песочница.

[Young11]

0xD34F, начальный код в самом вверху вернул , не могу теперь понять , почему пропал блок 4444 , в коде который я кинул чуток выше ?

[0xD34F]

text: 4444

item.text === '4444'

Young11, серьёзно? Зачем вам vue, если вы js вообще не знаете? Если не хотите превратиться в говнокодера - забудьте о vue на ближайшие полгода, и начинайте осваивать js.

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

Выше, в ответе, вам было предложено самостоятельно сочинить нужное условие для v-if. Не справились, ладно, бывает. Условие такое: show || item.id === 4.