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

【问题标题】：smooth transition of background color / vue js背景颜色的平滑过渡/ vue js
【发布时间】：2020-11-29 03:00:43
【问题描述】：

我正在尝试平滑 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>

背景颜色被应用于 class="topElements" 内的所有内容

任何帮助或建议都会很棒 - 提前致谢 - 沃利

【问题讨论】：

标签： css vue.js background-color

【解决方案1】：

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

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

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

【讨论】：