关于transform 对行内元素无效的一点笔记
一次开发中写样式,想要实现,鼠标进入某节点,判断节点是否含有子数组,如果有就显示下拉箭头,当鼠标进入该节点元素时,翻转箭头方向朝上
实现过程中,一切过程正常,项目是vue的,
添加样式代码如下
// 当鼠标进入 mouseenter事件触发时,将节点的index赋值给deptIndex,然后判断加样式
<i v-if="deptShowList[i].haveChild" class="icon iconfont iconxiala-copy" :class="deptIndex >= 0?'nav_icon':''" />
/// 分割线、。。。。、
.nav_icon {
transition: 0.35s all linear;
transform: rotateX(180deg);
}
以上
但是发现样式加上了,但是并没有实现想要的旋转效果,一顿分析,查询,样式和写法并没有问题
最后一个同事提醒好像以前遇到过,加一行 display: inline-block
.nav_icon {
display: inline-block;
transition: 0.35s all linear;
transform: rotateX(180deg);
}
然后探究为啥不加不行,
参考链接: https://www.cnblogs.com/fayin/p/9755590.html
transform 对于行内元素不生效,试了一下display: inline;实现不了效果
总结: transform 对行内元素不生效,需要改变元素为块元素或行内块元素
如有不足,欢迎交流补充