Just upload the gif:
Code:
stencil:
-
{{ item.name }}
-
{{ createText }}
CSS:
.toggle-enter-active, .toggle-leave-active{ transition: transform .3s cubic-bezier(.23, 1, .23, 1), opacity .3s cubic-bezier(.23, 1, .23, 1); transform-origin: center top; } .toggle-enter, .toggle-leave-active{ transform: translateZ(0) scaleY(0); opacity: 0; } .dropdown{ position: relative; width: 100%; &.open{ border-color: #57a3f1; .dropdown-icon{ transform: translateZ(0) rotate(180deg); } } &-icon{ position: absolute; top: 13px; right: 10px; font-size: 12px; color: #d3d3d3; transition: transform linear .2s; /*backface-visibility: hidden;*/ } }Some irrelevant styles have been removed. It is now known that the transition effect of the small triangle on the right side of the drop-down box in Chrome causes the text to blur and jitter. Ifbackface-visibility: hidden;# is added, ##, the text will not shake, but it will still be blurry. Under Firefox, the text will appear to be one pixel bold, but I think it is acceptable. On the contrary, this problem does not occur under IE9. . Ask God for guidance!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The discovery is thanks to
transform: translate(-50%, -50%)导致抖动和模糊，改成transform: translate3d(-50%, -50%, 0)会解决一部分问题，主要是transform：translateZ(0). But all the text is still blurry to a certain extent. I don’t know why? ?----------------update-----------------
I have sorted out the code again. The current situation is like this. When The text will not shake if you give
dialog-wrapper加上transform:translate3d(-50%, -50%, 0)的时候，文字不会抖动了，但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;, but it is still blurry. I'll take a look and write a simple demo to explain this problem better. . This problem often occurs in projects, and no suitable solution has been found. .Remove translateZ(0) and stop hardware acceleration