Question

单击时如何对按钮本身进行动画处理（切换）？

我尝试如下

<div id="app">

  <button class="btn" @click="show = !show">
    click
  </button> 

</div>

<script>
var app = new Vue({
  el: '#app',
  data: function() {
    return {
      show: true
    }
  }
});
</script>

<style>
.button { position:fixed; top:100px; left:100px; }
.button.active { left:0; }
</style>

我期望单击按钮时，按钮移到左侧：0位置的输出。再单击一次，它就会移到左边100。

Answer 1

当active为show时，使用class binding绑定true类。您还应该使用button类而不是btn，因为这就是CSS中的内容。

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

.button {
  position: fixed;
  top: 100px;
  left: 100px;
  transition: left 0.2s; /* added this for fun */
}

.button.active {
  left: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button class="button" :class="{active: show}" @click="show = !show">
    click
  </button>
</div>

如何在vue.js中制作按钮动画

1 个答案: