你的 .h1是一个类了，此时你需要在上边h1标签里面加上 calss=“h1”，这样你的.h1就能生效了；但是看你的写法是想直接控制标签，那么你只需要把 .h1的 . 去掉就行了，标签直接写就可以了，不用带“.”。
App.vue：
demo.vue（css）：
demo.vue（html）：
demo.vue（js）：
效果：
[图片上传失败...(image-c7afd3-1640662035396)]
Public/css/theme_1.css：
[图片上传失败...(image-e00dc1-1640661903141)]
App.vue：
demo.vue（html）：
demo.vue（js）：
效果：
[图片上传失败...(image-ed39bb-1640662035396)]
src/assets/css/theme.less：
[图片上传失败...(image-b46701-1640662035396)]
main.js：
App.vue：
demo.vue（html）：
demo.vue（js）：
效果：
[图片上传失败...(image-f6b84f-1640662035396)]
一、Vue css过渡的基本语法<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
