html - Vue 2.x 过渡不适用于 Html 标签 ID CSS
问题描述
只是好奇这是否是 vue 的预期行为,或者我没有看到一些底层的 CSS 逻辑?
- 当使用类选择器设置默认的 'right' 属性时,以下 Vue 转换有效
.theBoxClass { right: 100px;}
但不是在使用 css ID 选择器设置时
#theBoxId { right: 100px;}
CodePen https://codepen.io/PhilipNameHere/pen/xxwBWxw
代码
<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)。
推荐阅读
- docker - Kubernetes中MessageBus的指定地址找不到主机
- java - 来自 neo4j-java-driver 1.6.3 的 SSL 连接
- python - Numpy整个矩阵与单行相乘
- jquery - 未选中复选框时取消选中“全选”
- php - 使用来自 Laravel 控制器的值重定向 URL
- html - 如何仅删除最后一个 css 规则而不影响除此之外的任何其他 n 个最后一个规则
- android - ARCore Unity 图像捕捉
- mongodb - 投影在 mongodb npm 版本 3.1.8 中未按预期工作
- javascript - 使用角度形式将元素值形成为 JSON
- shell - 删除超过 2 年的大型媒体文件的脚本,其中删除了同名和日期的文本文件