css3 - Effets de transition CSS rendant le texte flou ou instable?

Question

Téléchargez simplement le gif :

Code :

Modèle :

<template id="dropdown">
  <p class="dropdown" :class="[extClass, {'open': open}]">
    <p class="dropdown-wrapper" @click="open = !open">
      <input class="dropdown-selector" :value="currentItem.name" readonly="readonly">
      <i class="bk-icon icon-angle-down dropdown-icon"></i>
    </p>
    <transition name="toggle">
      <p class="dropdown-list" v-show="open">
        <ul>
          <li class="dropdown-list-item" v-for="(item, index) in list" @click="selectItem(index)">
            <p class="text">{{ item.name }}</p>
            <p class="tools" v-if="tools !== false">
              <i class="bk-icon icon-edit dropdown-list-icon" v-if="tools.edit" @click="editFn(index)"></i>
              <i class="bk-icon icon-close1 dropdown-list-icon" v-if="tools.del" @click="delFn(index)"></i>
            </p>
          </li>
          <li class="dropdown-list-item" v-if="hasCreateItem" @click="createFn">
            <p class="text">
              {{ createText }}
            </p>
          </li>
        </ul>
      </p>
    </transition>
  </p>
</template>

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;*/
    }
  }

Certains styles non pertinents ont été supprimés. On sait maintenant que l'effet de transition du petit triangle sur le côté droit de la liste déroulante dans Chrome rend le texte flou et instable. Si backface-visibility: hidden; est ajouté, le texte ne le sera pas. gigue, mais ce sera toujours flou. Sous Firefox, le texte apparaîtra en gras d'un pixel, mais je pense que c'est acceptable. Au contraire, ce problème ne se produit pas sous IE9. . Demandez à Dieu de vous guider !

Answer 1

J'ai trouvé que transform: translate(-50%, -50%) provoquait de la gigue et du flou, je l'ai donc changé en transform: translate3d(-50%, -50%, 0) Cela résoudra certains problèmes, principalement dus à transform: translateZ(0). Mais tout le texte est encore dans une certaine mesure flou, je ne sais pas pourquoi ? ? transform: translate(-50%, -50%)导致抖动和模糊，改成transform: translate3d(-50%, -50%, 0)会解决一部分问题，主要是transform：translateZ(0)的功劳。但是所有文字还是会有一定程度的模糊，不知道是为什么？？

----------------update-----------------
又整理了一下代码，现在的情况是这样的，当给dialog-wrapper加上transform:translate3d(-50%, -50%, 0)的时候，文字不会抖动了，但是会模糊。如果给下拉框的小三角加上backface-visibility: hidden;

----------------mise à jour-----------------
J'ai à nouveau réglé le code. La situation actuelle est la suivante. comme suit, lors de l'ajout de transform:translate3d(-50%, -50%, 0) à dialog-wrapper, le texte ne tremblera pas, mais sera flou. Si vous ajoutez backface-visibility: Hidden; au petit triangle de la liste déroulante, le texte ne tremblera pas, mais il sera toujours flou. Je vais y jeter un œil et écrire une démo simple pour mieux expliquer ce problème. . Ce problème se produit fréquemment dans les projets et aucune solution adaptée n'a été trouvée. . 🎜

Answer 2

Supprimez TranslateZ(0) et arrêtez l'accélération matérielle