只是好奇这是否是Vue的预期行为,或者可能有一些我没有看到的底层CSS逻辑?
.theBoxClass { right: 100px;}
但当使用css ID选择器设置时,却不是这样。
#theBoxId { right: 100px;}
代码笔https:/codepen.ioPhilipNameHerepenxxwBWxw。
编码
<div id="background"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue">
<transition name="slide">
<div id="theBoxId" class="box" v-if="show">ID</div>
</transition>
<transition name="slide">
<div class="theBoxClass box" v-if="show">Class</div>
</transition>
<button v-on:click="onShowClick">CLICK ME TWICE</button>
</div>
body {
margin: 0;
padding:20px;
}
button
{
background:red;
padding:30px;
color:white;
font-weight:bold;
}
.box{
background:gray;
width:100px;
position:fixed;
height:100px;
text-align:center;
color:white;
font-size:20px;
line-height:100px;
}
.theBoxClass
{
top:20px;
right:100px;
}
#theBoxId
{
top:220px;
right:100px;
}
.slide-enter-active ,
.slide-leave-active {
transition: right 1s ease-out;
}
.slide-enter,
.slide-leave-to {
right:-100px;
}
new Vue({
el: "#vue",
data: {
show: false
},
methods: {
onShowClick: function() {
this.show = !this.show;
}
}
});
改变
.slide-enter,
.slide-leave-to {
right:-100px;
}
至
.slide-enter,
.slide-leave-to {
right:-100px !important;
}
使它与ID一起工作,因为ID选择器有更大的。特异性 比类选择器。
以下选择器类型列表按特殊性增加。
- 类型选择符(如h1)和伪元素(如::before)。
- 类选择器、属性选择器和伪类。
- ID选择符(如#example)。