Issue
I found this codepen that makes old text fade out and new text to appear: https://codepen.io/cythilya/pen/EXxved
html:
<div id="app">
<button @click="show = !show">Click Me!</button>
<transition mode="out-in">
<div class="block" v-if="show">Block 1</div>
<p class="block" v-else>Block
2</p>
</transition>
</div>
css:
body { font-family: 微軟正黑體; }
button { margin-bottom: 10px; }
#app {
padding: 10px;
}
.block {
background: #999;
color: #fff;
display: table-cell;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
.v-leave { opacity: 1; }
.v-leave-active { transition: opacity 2s }
.v-leave-to { opacity: 0; }
.v-enter { opacity: 0; }
.v-enter-active { transition: opacity 2s }
.v-enter-to { opacity: 1; }
js:
var vm = new Vue({
el: '#app',
data: {
show: true
}
});
However when I try to use it with Vue 3
, it fades out the old text, but doesn't fade in the new text - the new text appears abruptly: https://codesandbox.io/s/nameless-resonance-yjfl72?file=/src/App.vue
<template>
<div id="app">
<button @click="show = !show">Click Me!</button>
<transition mode="out-in">
<div class="block" v-if="show">Block 1</div>
<p class="block" v-else>Block 2</p>
</transition>
</div>
</template>
<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld: HelloWorldVue,
},
data() {
return { show: true };
},
};
</script>
<style>
body {
font-family: 微軟正黑體;
}
button {
margin-bottom: 10px;
}
#app {
padding: 10px;
}
.block {
background: #999;
color: #fff;
display: table-cell;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
.v-leave {
opacity: 1;
}
.v-leave-active {
transition: opacity 2s;
}
.v-leave-to {
opacity: 0;
}
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: opacity 2s;
}
.v-enter-to {
opacity: 1;
}
</style>
Why did the behavior change? How should I fix it?
Solution
In Vue 3, the CSS class names were adjusted, .v-enter
is now .v-enter-from
:
.v-enter-from {
opacity: 0;
}
Here it is in a playround
Answered By - Moritz Ringler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.