点击按钮 控件背景颜色简单过渡变更。
<style>
/*
过渡
*/
.transtion {
transition: 3s background-color ease;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
<body>
<div id="root"></div>
</body>
<script>
// 创建 vue实例
const app = Vue.createApp({
data() {
return {
animate: {
transtion: true,
blue: true,
green: false
}
}
},
methods:{
handleClick() {
this.animate.green = !this.animate.green
this.animate.blue = !this.animate.blue
}
},
template: `
<div>
<div :class="animate">
hello world!
</div>
<button @click="handleClick">
切换
</button>
</div>
`
});
const vm = app.mount('#root');
</script>
上述实例为简单过渡实例,仅供自己学习参考。
过渡升级版本
<style>
/*
过渡
*/
.transtion {
transition: 3s background-color ease;
}
</style>
<body>
<div id="root"></div>
</body>
<script>
// 创建 vue实例
const app = Vue.createApp({
data() {
return {
styleObj: {
background: 'blue'
}
}
},
methods:{
handleClick() {
if (this.styleObj.background === 'blue') {
this.styleObj.background = 'green'
} else {
this.styleObj.background = 'blue'
}
}
},
template: `
<div>
<div :class="transtion" :style="styleObj">
hello world!
</div>
<button @click="handleClick">
切换
</button>
</div>
`
});
const vm = app.mount('#root');
</script>