#vue.js #css-transitions #transition
#vue.js #css-переходы #переход
Вопрос:
У меня есть карта наложения, которая показывает только if foo == true
.
В своих недавних проектах я использовал vuetify
transition. но на этот раз я не использую vuetify.
Есть ли какой-либо способ добиться этого с помощью чистого css или javascript?
Ответ №1:
Документы — твой друг:
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
Комментарии:
1. Да, это тоже работает. Но в моем случае, вместо присвоения
v-if
обычному HTML-элементу, у меня есть компонент vue. и это не сработало