I'm currently diving into VueJS and struggling to tackle this issue with transitions. My project includes two components - ComponentA and ComponentB. Let's take a closer look at them:
ComponentA:
<template>
<div id="ComponentA">
<h1 class="header" v-on:click="update">HEADER</h1>
<transition
name="custom-classes-transition"
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
><p class="content" v-if="visible">
Some information...
</p></transition>
</div>
</template>
<script>
import App from "@/App";
export default {
datas: {
visible: false
},
name: "ComponentA",
data () {
return this.$options.datas;
},
methods: {
update () {
App.update(this.$options.name);
}
}
};
</script>
<style scoped>
</style>
ComponentB:
<template>
<div id="ComponentB">
<h1 class="header" v-on:click="update">HEADER2</h1>
<transition
name="custom-classes-transition"
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
><p class="content" v-if="visible">
Some more information...
</p></transition>
</div>
</template>
<script>
import App from "@/App";
export default {
datas: {
visible: false
},
name: "ComponentB",
data () {
return this.$options.datas;
},
methods: {
update () {
App.update(this.$options.name);
}
}
};
</script>
<style scoped>
</style>
In my App.vue file:
<template>
<div id="app">
<header href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet" type="text/css">
<ComponentA />
<ComponentB />
</div>
</template>
<script>
import ComponentA from "@/components/ComponentA";
import ComponentB from "@/components/ComponentB";
export default {
name: "App",
components: {
ComponentA,
ComponentB
},
update (clickedComponent) {
for (let component in this.components) {
component = this.components[component];
if (component.name === clickedComponent) {
component.datas.visible = !component.datas.visible;
} else {
component.datas.visible = false;
}
}
}
};
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
:root {
--background: #0f0f0f;
--blueish: #546a76;
--grayish: #7c7c7c;
--lighterblueish: #737c81;
}
body {
line-height: 1.7;
background-color: var(--background);
color: var(--grayish);
font-family: 'Space Mono', monospace;
font-size: 18px;
position: relative;
height: 100%;
width: 60%;
margin: auto;
padding-top: 10vh;
}
.header {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: var(--blueish);
width: max-content;
position: sticky;
left: 100%;
}
.header span {
background-color: var(--lighterblueish);
color: var(--background);
}
.content {
padding-top: 5%;
}
.content span {
color: var(--blueish);
}
</style>
The problem arises when I click on the header of ComponentA - its content fades in beautifully with an animation, but ComponentB abruptly moves down without any transition effects. Despite trying keys and various other strategies, I couldn't succeed in adding a smooth transition to ComponentB's movement. Any advice or solutions would be greatly appreciated!
Edit: Check out the JSFiddle here for reference: https://jsfiddle.net/44ctt020/2/