我做了一个方框过渡，当它变大，我如何仍然使它有相同的过渡效果，因为它关闭急剧。
<template>
<div class="hello">
<div @click="biggerbox = !biggerbox;" class="box" :class="{'biggerbox':biggerbox}"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
biggerbox: false
};
}
};
</script>
<style scoped>
.box {
background-color: red;
height: 80px;
width: 90px;
}
.biggerbox {
background-color: red;
height: 180px;
width: 190px;
display: flex;
transition-duration: 1s;
transition-timing-function: ease;
}
</style>
这是指向代码沙盒的链接https://codesandbox.io/s/focused-dew-0pm34？file=/src/components/helloworld.vue:338-582
您应该向.box类添加转换属性，如下所示:
.box {
background-color: red;
height: 80px;
width: 90px;
transition: width 1s ease, height 1s ease;
}
这样做是因为无论状态如何，这类都存在，所以当您移除另一个类时，转换仍然存在。
这里有一个额外的提示:您可以在您的元素上使用单个class属性，如下所示:
<div
@click="biggerbox = !biggerbox;"
:class="['box', {'biggerbox':biggerbox}]"
/>
您的问题是，当您移除。BiggerBox类时，您将失去转换。
只需将转换添加到。Box类即可
.box {
transition: all 1s ease;
background-color: red;
height: 80px;
width: 90px;
}
