javascript Vue.js在挂载时更改类

uqcuzwp8  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(158)

我有一个按钮元素。悬停属性,我需要悬停动画也发生在页面安装。我如何将一个类属性化到挂载函数上的一个按钮上,然后取消它的属性化?
我想使用setTimeout,但它不能正常工作。我的代码基于以下代码Pen:https://codepen.io/lucasfads/pen/QWwjGjv

<a href="#" class="button" id="specialButton">
  <span class="icon"></span>
  <span class="text">Hakuna Matata</span>
</a>
mounted() {
  document.getElementById("specialButton").classList.add("expanded");

  setTimeout(() => {
    document.getElementById("specialButton").classList.remove("expanded");
  }, 3000);
}
.button {
  background-color: #099;
  color: white;
  text-decoration: none;
  border-radius: 60px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  overflow:hidden;
  width: auto;
  max-width: 32px;
  transition: max-width 0.5s;
}

.button:hover,
.button .expanded {
  max-width: 300px;
}

.icon {
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  margin-right: 15px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
}

.text {
  white-space: nowrap;
  padding-right: 15px;
}
bmp9r5qi

bmp9r5qi1#

应该是.button.expanded而不是.button .expanded
除此之外,请参阅Jaromanda X的评论,我同意在Vue中使用直接DOM操作是一个糟糕的指标。
另一个想法-它可能会更有效地默认有该类,然后删除它以后。否则,您将执行mount、add class、remove class - 3 DOM操作。相反,您可以只挂载、删除class - 2 DOM操作。

相关问题