Bootstrap Vue Tooltip使用CSS transform动画时位置偏移问题求助

问题现象 #

给Bootstrap Vue Tooltip添加包含transform属性的CSS动画后，tooltip会先跳转到屏幕左上角显示，等动画结束后才回到目标元素旁的正确位置。

原代码 #

HTML

<div id="app">
  <b-button :ref="uniqueRef" class="m-5">
    Click Me
  </b-button>
   <b-tooltip :target="() => $refs[uniqueRef]" title="This is cool" />
</div>

CSS

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tooltip {
  animation: tada 0.6s ease-in-out;
}

问题原因 #

Bootstrap Vue Tooltip的定位是通过JS计算后，给外层.tooltip容器添加transform: translate(x,y)实现的。直接给.tooltip加动画的话，动画关键帧里的transform会覆盖定位用的transform，导致tooltip初始显示在默认的左上角，直到动画结束后定位的transform才会恢复生效。

解决办法 #

把动画应用到tooltip的内部元素（比如.tooltip-inner）上，这样内部元素的动画不会干扰外层容器的定位，tooltip就能保持正确位置同时播放动画。

修改后的CSS：

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

/* 仅在tooltip显示时触发动画 */
.tooltip.show .tooltip-inner {
  animation: tada 0.6s ease-in-out;
}

如果需要让tooltip的箭头也同步动画，可同时给.tooltip-arrow添加动画：

.tooltip.show .tooltip-inner,
.tooltip.show .tooltip-arrow {
  animation: tada 0.6s ease-in-out;
}

内容的提问来源于stack exchange，提问作者Dennis