项目场景:
在react项目中使用antd组件中的锚点组件,在点击进行跳转的时候锚点字体是需要变大。在控制台点击没有发现这种情况,在真机进行测试出现了字体抖动的情况。
// 锚点点击之前的样式
.ant-anchor-link-title {color: #866c49;font-family: 微软雅黑;font-size: 15px;
}
// 锚点点击之后添加上的样式
.ant-anchor-link-title-active {color: $color !important;font-weight: 700;font-size: 24px
}
我就是单纯的将点击之后字体变大,就出现了这种情况。我以为是外层的盒子的影响。我也将外层盒子的布局去掉也还是有这种情况出现。
解决方案:
我是另辟蹊径,用scale将元素放大就没有存在抖动的情况
// 锚点点击之前的样式
.ant-anchor-link-title {color: #866c49;font-family: 微软雅黑;font-size: 15px;
}
// 锚点点击之后添加上的样式
.ant-anchor-link-title-active {color: $color !important;font-weight: 700;scale: 1.4
}