Javascript VueJs-使用转换更改div颜色_Javascript_Css_Vue.js_Vuejs2

Javascript VueJs-使用转换更改div颜色

javascript css vue.js vuejs2

Javascript VueJs-使用转换更改div颜色,javascript,css,vue.js,vuejs2,Javascript,Css,Vue.js,Vuejs2,我有一个标题栏和一个按钮。我可以在单击时更改颜色，但我希望颜色更改具有平滑过渡或单击时的效果。是否可以使用Vue.js执行此操作 HTML代码 <html> <head> <title>My App</title> </head> <body> <div id="app"> <div class="head" :class=

我有一个标题栏和一个按钮。我可以在单击时更改颜色，但我希望颜色更改具有平滑过渡或单击时的效果。是否可以使用Vue.js执行此操作

HTML代码

<html>    
    <head>
      <title>My App</title>
    </head>
    <body>
        <div id="app">
            <div class="head" :class="{ headnew : change }"></div>
            <button @click="changeIt">Change me!</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> 
    </script>
</html>

.head {
    background: linear-gradient(-90deg, #84CF6A, #16C0B0);
    height: 60px;
    margin-bottom: 15px;
  }

.headnew {
    background: red;
    height: 60px;
    margin-bottom: 15px;
}

JS代码

var app = new Vue({
    el: "#app",
    data: {
        change : false
    },
    methods: {
        changeIt() {
            this.change = true
        }
    }
})

背景渐变无法设置动画，但您可以通过在与背景重叠的另一个元素（本例中为

：：before

伪元素）中淡入淡出来进行修改

下面是一个通用HTML+CSS示例，您可以轻松地对其进行代码调整：

.box{
宽度：100px；
高度：100px；
背景：线性渐变（顶部、蓝色、黄色）；
位置：相对位置；
z指数：0；
}
.box：：之前{
内容：''；
位置：绝对位置；
z指数：-1；
左：0；
排名：0；
右：0；
底部：0；
背景色：红色；
不透明度：0；
过渡：不透明度0.2s线性；
}
.box:悬停：：之前{
不透明度：1；
}

一些文本

只需将

转换

属性添加到

头部

即可，如下所示：

  .head {
  ...
    transition: background 6s ease;
   }

检查以下工作解决方案：

var-app=新的Vue({
el:“应用程序”，
数据：{
更改：错误
},
方法：{
changeIt（）{
这是真的
}
}
})

.head{
背景：线性梯度（-90度，#84CF6A，#16C0B0）；
高度：60px；
边缘底部：15px；
过渡：背景6s轻松；
}
.头新{
背景：红色；
高度：60px；
边缘底部：15px；
}


改变我！

是的，这正是我所需要的，但我希望只需单击按钮即可完成转换，我不知道Vue是否可以处理pesudo属性。这就是为什么我提到您需要根据您的情况调整它（而不是使用

.box:hover

，例如，您可以使用

.headnew

）。您的问题与Vue无关；到目前为止，您的Vue代码还可以。这都是关于CSS的。