Question

我正在尝试使用CSS转换过渡（在下面的代码段中演示）在文本的完整字符串及其缩写之间创建动画。

我理想地希望发生的是，在完整字符串和缩写字符串之间不需要的字母从0％到100％（或以相反的方式）水平缩放，这是我起作用的。

但是，我也希望非转换字母的位置随着转换字母的宽度压缩而压缩，并且尽管我可以实现前一个功能，但似乎无法使该字母正常工作。

简而言之，到目前为止，我编写的代码成功地转换了所有字母，但是在转换开始的那一刻，一些字母却紧挨着跳跃。

#bhead.smaller h1 {
  position: fixed;
  top: 2vh;
  right: 0;
  left: 0;
  font-size: 3.5vh;
  margin: auto;
  padding: 0;
  text-transform: lowercase;
  transition: all 0.5s ease-out;
}

#bhead h1 div {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  transition: all 5s linear;
}

#bhead h1 .del {
  display: inline-block;
  width: auto;
  opacity: 1;
}

#bhead.smaller h1 .del {
  transform: scaleX(0);
  width: 0;
  opacity: 0;
}

#bhead h1 .undel {
  display: inline-block;
  transform: scaleX(0);
  width: 0;
  opacity: 0;
}

#bhead.smaller h1 .undel {
  transform: scaleX(1);
  width: auto;
  opacity: 1;
}

button {
  position: fixed;
  top: 15vh;
}

<body id="bhead">
  <h1 id="header" class="middle unselectEase"><div>J</div><div class="del">o</div><div>r</div><div class="del">dan&nbsp;</div><div>Ma</div><div class="del"></div><div>nn</div><div class="undel">.com</div>
  </h1>
  <button onclick="document.querySelector('#bhead').className = document.querySelector('#bhead').className == 'smaller' ? '' : 'smaller'">Transform</button>
</body>

（您可能需要扩展代码段以使间距起作用。）

Answer 1

知道了！重新发现width必须在两个固定值之间转换（使用文本也很困难）之后，我能够找到this article,，其中描述了如何max-width而不是{{1} }完全避免这种情况。作者还提供了一个方便的JSFiddle演示，但是我已经修复了下面的代码段。

鉴于，设置width属性存在风险，但是我可以接受这个特定实例。

max-width

#bhead h1 {
  height: 6vh;
  font-size: 6vh;
  white-space: nowrap;
  position: fixed;
  right: 0;
  left: 0;
}

#bhead.smaller h1 {
  position: fixed;
  top: 2vh;
  right: 0;
  left: 0;
  font-size: 3.5vh;
  margin: auto;
  padding: 0;
  text-transform: lowercase;
  transition: all 0.5s ease-out;
}

#bhead h1 div {
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: all 5s linear;
  max-width: 20vw;
}

#bhead h1 .del {
  display: inline-block;
  opacity: 1;
}

#bhead.smaller h1 .del {
  transform: scaleX(0);
  max-width: 0;
  opacity: 0;
}

#bhead h1 .undel {
  display: inline-block;
  transform: scaleX(0);
  max-width: 0;
  opacity: 0;
}

#bhead.smaller h1 .undel {
  transform: scaleX(1);
  max-width: 0;
  opacity: 1;
}

button {
  position: fixed;
  top: 15vh;
}

CSS转换与转换跳跃

1 个答案: