时间戳

首页 > 解决方案 > 添加变换比例过渡时自定义工具提示损坏

css - 添加变换比例过渡时自定义工具提示损坏

问题描述

如果我从第 18 行和第 48 行（只留下）scale中删除，代码可以工作，但不合适。我想添加过渡以使过渡更平滑，但会导致矩形和工具提示不能很好地融合在一起。如何解决这个问题？transformtranslateYscale

.tooltip {
  display: block;
  background: #F24B5B;
  color: white;
  margin: 5em auto;
  padding: 1em 0;
  text-align: center;
  width: 13em;
  position: relative;

  --rec-size: .3em;
  --half-rec-size: calc( var(--rec-size) / 2 )
}
.tooltip::before,
.tooltip::after {
  position: absolute;
  opacity: 0;
  transform: scale(.5) translateY(1em);
  transform-origin: center bottom;
  transition: 
    opacity .3s ease-out, 
    transform .15s ease-out
    ;
}
.tooltip::after {
  content: '';
  border: var(--rec-size) solid #0000;
}
.tooltip::before {
  content: attr(title);
  width: 80%;
  line-height: 2em;
  border-radius: .2em;
  background: #000b;
}
.tooltip.top::before {
  bottom: calc( 100% + var(--rec-size) );
  left: 10%;  
}
.tooltip.top::after {
  border-top: var(--rec-size) solid #000b;
  bottom: calc( 100% - var(--rec-size) );
  left: calc( 50% - var(--half-rec-size) );
}
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: scale(1) translateY(0);
}
<div class="tooltip top" title="Tooltip on top!">
  Hover over me
</div>

标签： csstooltipcss-transforms

解决方案

.tooltip {
  display: block;
  background: #F24B5B;
  color: white;
  margin: 5em auto;
  padding: 1em 0;
  text-align: center;
  width: 13em;
  position: relative;

  --rec-size: .3em;
  --half-rec-size: calc( var(--rec-size) / 2 )
}
.tooltip::before,
.tooltip::after {
  position: absolute;
  opacity: 0;
  transform: scale(.5) translateY(1em);
  transform-origin: center bottom;
  transition: 
    opacity .3s ease-out, 
    transform .15s ease-out
    ;
}

.tooltip::after {
  transform: translateY(0.5em);
}

.tooltip::after {
  content: '';
  border: var(--rec-size) solid #0000;
}
.tooltip::before {
  content: attr(title);
  width: 80%;
  line-height: 2em;
  border-radius: .2em;
  background: #000b;
}
.tooltip.top::before {
  bottom: calc( 100% + var(--rec-size) );
  left: 10%;  
}
.tooltip.top::after {
  border-top: var(--rec-size) solid #000b;
  bottom: calc( 100% - var(--rec-size) );
  left: calc( 50% - var(--half-rec-size) );
}
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: scale(1) translateY(0);
}
<div class="tooltip top" title="Tooltip on top!">
  Hover over me
</div>

::after 和 ::before 设置不同的 translateY

.tooltip::after {
  transform: translateY(0.5em);
}

或者像上面那个

.tooltip::after,.tooltip::before {
  transform-origin: center 140%;
}

推荐阅读