smooth transition of background color / vue js - css

Question

I am trying to smooth transition between background linear gradients in vue js
Previously when I created this transition effect using plain js / HTML / css - i created a div for each color and just changed there opacity - fading one out to another
(you can see the effect i am trying to create here, just nav between different languages to see the effect) https://littleleo.dev/
in vue js -
the nav invokes a function when clicked (which gets the nav id)
<Navbar :articleData="articleData" #backgroundColor="background"/>
background(f) updates a watched property - using a list of colors
methods: {
background(id){
let bg_id = id-1 // -1 so the number is inline with the array starting at 0 not 1
this.backgroundColor = this.backgrounds[bg_id]
}
data(){return{
backgroundColor: null,
backgrounds:
[
'linear-gradient(45deg, #e96443, #904e95)',
'linear-gradient(45deg, #3a7bd5, #3a6073)',
'linear-gradient(45deg, #f7ff00, #db36a4)',
'linear-gradient(45deg, #B24592, #F15F79)',
'linear-gradient(45deg, #FFB75E, #ED8F03)',
'linear-gradient(45deg, #673AB7, #512DA8)',
'linear-gradient(45deg, #fc00ff, #00dbde)',
'linear-gradient(45deg, #00C9FF, #92FE9D)',
],
and the magic happens here: where the background is changed
// changes background color
watch: {
backgroundColor: function(){
document.querySelector('.topElements').style.background = this.backgroundColor
}
}
So currently this happens with no transition time between the background colors changing - i was wondering if anyone knew how to transition without creating a overlay div for each of the colors &/or there is some clever vue js magic that can solve this type of issue:
further details:
this is in App.vue and my template looks like this:
<template>
<div id="app">
<div class="topElements" :class="[noneSelected]"> // <<< COLOR APPLIED HERE
<!-- animation -->
<lottie :options="defaultOptions" :height="350" :width="350"/>
<Navbar :articleData="articleData" #backgroundColor="background"/>
<span class="breaker"></span>
<transition name="content-holder">
<router-view :key="$route.path"/>
</transition>
</div>
<Footer />
</div>
</template>
the background color is being applied to everything inside of the class="topElements"
any help or suggestions would be amazing -
thanks in advance -
Wally

Answer 1

As vue.js documentation says, the best way to make a similar effect is using absolute positioning.
https://v2.vuejs.org/v2/guide/transitions.html#Transition-Modes
This is the best way to deal with it.
Most tricks wich get the same effect has a much bigger code and it is not the right way.
To understand how vue.js transition works please visit https://alligator.io/vuejs/understanding-transitions/
https://medium.com/#msanathkumar/understanding-transitions-and-animations-in-vuejs-115a0f5c6fbc