我有一个标题栏和一个按钮。我可以在单击时更改颜色，但我希望颜色更改具有平滑过渡或单击效果。是否可以使用 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>
CSS 代码
.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 {
width: 100px;
height: 100px;
background: linear-gradient(to top, blue, yellow);
position: relative;
z-index: 0;
}
.box::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: red;
opacity: 0;
transition: opacity 0.2s linear;
}
.box:hover::before {
opacity: 1;
}<div class="box">Some text</div>关于javascript - VueJs - 通过过渡更改 div 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52342491/