Check out my code on Codepen: here
In this scenario, I have set up two div elements: Block 1 and Block 2.
The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens, I want Block 2 to seamlessly appear from the right side within the parent div.
The caveat here is that I need Block 2 to begin its movement only when Block 1 reaches the halfway point at translateX: 50%.
<template>
<div id="app">
<button @click="show = !show">Click Me!</button>
<transition mode="out-in">
<div class="block" id="block-1" v-if="show">Block 1</div>
<p class="block" id="block-2" v-else>Block 2</p>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return { show: true };
},
};
</script>
<style>
body {
font-family: 微軟正黑體;
}
button {
margin-bottom: 10px;
}
#block-1 {
background-color: yellow;
color: black;
}
#block-2 {
background-color: green;
}
#app {
padding: 10px;
background-color: gray;
overflow: hidden;
}
.block {
background: #999;
color: #fff;
display: table-cell;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
.v-leave-from {
transform: translateX(0%);
}
.v-leave-active {
transition: transform 1s;
}
.v-leave-to {
transform: translate(-220%);
}
.v-enter-from {
transform: translateX(600%);
}
.v-enter-active {
transition: transform 2s;
}
.v-enter-to {
transform: translateX(0%);
}
</style>