Я собираюсь предположить, в качестве аргумента, что вам действительно нужно использовать visibility
для сокрытия, и что другие потенциальные решения (например, opacity
) не будут работать в вашем реальном варианте использования, возможно, потому что они не предотвращают взаимодействие пользователя с элементом.
Однако утверждение в вопросе немного вводит в заблуждение. На самом деле это не разница между display
и visibility
. Настоящая разница здесь в том, что в случае display
используется v-show
, который включает специальную обработку переходов.
Текущий исходный код для v-show
можно увидеть здесь:
com / vuejs / vue-next / blob / d7beea015bdb208d89a2352a5d43cc1913f87337 / packages / runtime-dom / src / directives / vShow.ts
Аналогичный подход можно использовать для создания директивы, использующей visibility
. Ниже приведен пример. Он основан на коде для v-show
, но я сократил его до кода, необходимого для этого конкретного варианта использования:
const visible = {
updated(el, { value, oldValue }, { transition }) {
if (!value === !oldValue) {
return
}
if (value) {
transition.beforeEnter(el)
el.style.visibility = ''
transition.enter(el)
} else {
transition.leave(el, () => {
el.style.visibility = 'hidden'
})
}
}
}
Vue.createApp({
data() {
return {
show: true
};
},
methods: {
toggle() {
this.show = !this.show;
}
},
directives: {
visible
}
}).mount('#app')
#app {
text-align: center;
}
.tooltip-enter-active {
transition: transform 0.4s ease-out, opacity 0.3s ease-out;
}
.tooltip-leave-active {
transition: transform 0.35s ease-in, opacity 0.28s ease-out;
}
.tooltip-enter-from {
transition: none;
}
.tooltip-enter-from,
.tooltip-leave-to {
transform: translateY(-30px) scale(0.96);
opacity: 0;
}
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="app">
<transition name="tooltip">
<div v-visible="show">
Using visibility
</div>
</transition>
<button @click="toggle">toggle message</button>
</div>
Мне также пришлось внести небольшое изменение в CSS, чтобы ускорить переход при входе:
.tooltip-enter-from {
transition: none;
}
person
skirtle
schedule
31.10.2020
div{ display:block !important; }
? - person Miro   schedule 30.10.2020clientWidth
"? - person Daniel_Knights   schedule 31.10.2020