直接上gif圖吧：
#程式碼：
模版：
-
{{ 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;*/ } }去掉了一些不相關的樣式，現在已知的情況是在Chrome中下拉框右側小三角的過渡效果導致文字模糊和抖動的，如果給加上backface-visibility: hidden;，文字不會抖動，但依然模糊。在Firefox下文字會有看似一像素的加粗，不過我覺得可以接受了，反而是IE9下不會有這種問題。 。求大神指導！
發現是
transform: translate(-50%, -50%)导致抖动和模糊，改成transform: translate3d(-50%, -50%, 0)会解决一部分问题，主要是transform：translateZ(0)的功勞。但所有文字還是會有一定程度的模糊，不知道是為什麼？ ？----------------update-----------------
又整理了一下程式碼，現在的情況是這樣的，當給
dialog-wrapper加上transform:translate3d(-50%, -50%, 0)的时候，文字不会抖动了，但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;文字也不會抖動，但還是模糊。我看再寫一個簡單的demo來更好的解釋這個問題吧。 。這個問題在專案中經常出現，一直沒找到適合的解決方案。 。把translateZ(0)去掉，把硬體加速停掉