Question

我正在尝试为具有两种状态的按钮设置动画：保存和未保存。当它从保存 - ＆gt; unsave，它应该慢慢扩展并添加下一个文本。从unsave到save时它应该反过来。我有以下小提琴：

我现在的问题是即使我指定了宽度过渡，它似乎也忽略了它。我的问题是这个按钮可以有任意文本，这本质上只是布尔值，所以我不能事先知道确切的宽度。我只需要将它设置为适当的文本宽度，无论文本是什么。

HTML：

<div class="button" >
  <text class="text"> Save </text>
</div>

CSS：

.button {
   background-color: transparent;
   border: 1px solid;
   border-color: black;
   border-radius: 6px;
   color: black;
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
   margin-top: 8px;
   outline-style: none;
   padding: 6px 10px;
   text-align: center;
   transition: width 2s cubic-bezier(0.23, 1, 0.32, 1);
   width: auto;
 }

.button-depressed {
   color: white;
   background-color: #ADD8E6;
   border-color: transparent;
}

JS：

var isSaved = false

function doSaveAnimation() {
  var button = document.getElementsByClassName("button")[0];
  button.classList.add("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Unsave";
  }, 80);
}

function doUnsaveAnimation() {
  var button = document.getElementsByClassName("button")[0];
  button.classList.remove("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Save";
  }, 80);
}

function animate(){
  if (isSaved) {
    doUnsaveAnimation();
  } else {
    doSaveAnimation();
  }
  isSaved = !isSaved;
}

document.getElementsByClassName("button")[0].addEventListener("click", animate);

Answer 1

没有javascript的一种方法是使用max-width而不是width。

https://jsfiddle.net/LjchoLqt/

.button {
  transition: max-width 2s cubic-bezier(0.23, 1, 0.32, 1);
  width: auto;
  max-width: 2em;
}

.button-depressed {
  max-width:4em;
}

您需要支付这些值，以确保它不会被切断。这不是一个理想的解决方案，特别是如果你不控制内容（例如它由CMS填充）

Answer 2

您可以计算要设置到按钮的文本的宽度，并相应地将计算的宽度设置为按钮;
一旦立即，然后每次点击。

您还可以设置过渡到所有内容，而不仅仅是按钮的宽度 - 以获得更流畅的动画。

In this post您有几个如何确定文本宽度的示例，我已经根据以下解决方案调整了其中一个：

＆＃13;

var isSaved = false;
var button = document.getElementsByClassName("button")[0];
button.style.width = getWidthOfText("Save", "14","sans-serif") +20+ "px";

function getWidthOfText(txt, fontsize) {
  var c = document.createElement('canvas');
  var ctx = c.getContext('2d');
  ctx.font = fontsize + 'px' ;
  var length = ctx.measureText(txt).width;
  return length;
}

function doSaveAnimation() {
  button.classList.add("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Unsave";
    console.log(button.offsetWidth);
  }, 120);
  button.style.width = getWidthOfText("Unsave", "14") +20+ "px";
}

function doUnsaveAnimation() {

  button.classList.remove("button-depressed");
  setTimeout(function() {
    button.innerHTML = "Save";
    console.log(button.offsetWidth);
  }, 120);
  button.style.width = getWidthOfText("Save", "14") +20+ "px";
}

function animate() {
  if (isSaved) {
    doUnsaveAnimation();
  } else {
    doSaveAnimation();
  }
  isSaved = !isSaved;
}

document.getElementsByClassName("button")[0].addEventListener("click", animate);

＆＃13;

.button {
  background-color: transparent;
  border: 1px solid;
  border-color: black;
  border-radius: 6px;
  color: black;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  margin-top: 8px;
  outline-style: none;
  padding: 6px 10px;
  text-align: center;
  transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
  text-align:center;
}
.button-depressed {
  color: white;
  background-color: #ADD8E6;
  border-color: transparent;
  transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
}

＆＃13;

<div class="button">
  <text class="text">Save</text>
</div>

＆＃13;

动画按钮可以扩展为新文本

2 个答案: