背景颜色的平滑过渡/vue js

Question

我正在尝试在vue-js 中平滑背景线性梯度之间的转换

以前，当我使用普通的js/HTML/css创建这种过渡效果时，我为每种颜色创建了一个div，并只是更改了不透明度-将一个渐变为另一个

(你可以在这里看到我试图创建的效果，只需在不同语言之间导航即可看到效果(https://littleleo.dev/

在vue js-

当点击(获得导航id(时，导航调用一个功能

<Navbar :articleData="articleData" @backgroundColor="background"/>

background(f(使用颜色列表更新关注的属性

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)',
],

神奇的事情就发生在这里：背景改变了

// changes background color 
watch: {
backgroundColor: function(){
document.querySelector('.topElements').style.background = this.backgroundColor
}
}

因此，目前这种情况下，背景颜色之间的过渡时间没有变化——我想知道是否有人知道如何在不为每种颜色创建覆盖div的情况下进行过渡/或者有一些巧妙的vue-js魔术可以解决这种类型的问题：

更多详细信息：

这在App.vue中，我的模板如下：

<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>

背景颜色被应用于类＝"0"内部的所有事物；topElements"；

---

任何帮助或建议都将令人惊叹-提前感谢-Wally

Answer 1

正如vue.js文档所说，产生类似效果的最佳方法是使用绝对定位。https://v2.vuejs.org/v2/guide/transitions.html#Transition-模式这是最好的处理方法。

大多数获得相同效果的技巧都有更大的代码，这不是正确的方法。

要了解vue.js转换的工作原理，请访问https://alligator.io/vuejs/understanding-transitions/https://medium.com/@msanathkumar/理解-vuejs-115a0f5c6fbc 中的转换和动画