Laden Sie einfach das GIF hoch:

Code:

Vorlage:

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

Einige irrelevante Stile wurden entfernt. Es ist jetzt bekannt, dass der Übergangseffekt des kleinen Dreiecks auf der rechten Seite des Dropdown-Felds dazu führt, dass der Text unscharf wird und zittert , aber es wird immer noch verschwommen sein. Unter Firefox erscheint der Text um einen Pixel fett, aber ich halte das für akzeptabel. Im Gegenteil, unter IE9 tritt dieses Problem nicht auf. . Bitten Sie Gott um Führung! backface-visibility: hidden;