Как с помощью vue анимировать появление элемента с БЭМ-модификатором?

Question

[Ankozar]

Доки vue:

<transition name="fade">
    <p v-if="show">привет</p>
  </transition>

Мой случай:

<div class="menu-category"
        :class='[!this.$store.state.mobile ? "menu-category_desktop " : "menu-category_mobile"]'>

Скрывается и появляется только элемент с классом ..._mobile. Десктопную версию скрывать и анимировать не нужно.
Как быть?
Сейчас я вижу только два варианта: разделить компонент на два разных шаблона. Либо в методе прописать обычный js

Comments

[Сергей Сергей]

Если через v-bind:name для десктопной версии задать несуществующий эффект?

https://css-tricks.com/the-power-of-named-transiti...

Answer 1

[Alex_mos]

Не совсем понимаю зачем в классе прописывать this !this.$store.state.mobile, попробуйте прописать вот так$store.state.mobile и почему бы это не вынести в computed свойство.

Comments

[Ankozar]

Это не вы не понимаете, это я не понимаю XD

[Alex_mos]

Ankozar, попробуйте прописать в

computed:{
isMobile(){
return this.$store.state.mobile
}
}

А в компоненте

:class='[!isMobile ? "menu-category_desktop " : "menu-category_mobile"]'>