Question

我使用 this 解决方案为Bootstrap工具提示制作动画，但是存在问题。我想在工具提示上使用比例变换。当我第一次将鼠标悬停在按钮上时它工作正常，但随后工具提示移动到不同的位置。我认为这与工具提示的Bootstrap JS定位有关（最初工具提示的规模为0，因此工具提示的尺寸为0x0px，这可能是我问题的原因）。

HTML：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

CSS：

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.scale {
  animation: scale 200ms cubic-bezier(0, 0, 0.2, 1);
}

JS：

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
  $('.tooltip').addClass('scale');
});

的 CODEPEN

Answer 1

我想我解决了我的问题：

HTML：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

CSS：

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  1% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.scale {
  animation: scale 200ms cubic-bezier(0, 0, 0.2, 1);
}
.tooltip.fade {
  transition: none;
  opacity: 0;
}

JS：

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
  $('.tooltip').addClass('scale').css('opacity', 1);
});

动画Bootstrap工具提示 - 转换属性

的 CODEPEN

1 个答案:

的 CODEPEN