Vue转换不起作用

Question

我想知道我在这里做错了什么，我的过渡不起作用了。我试图使切换到右或左的点击，它是工作的，但没有转换。我想我在这里错过了什么。

<template>
<div class="switchery" @click="activate" >
      <div class="switchery-check" v-bind:class="{active:isactive}"></div>
</div>
</template>

    <script>
      export default {
        data:function(){
          return{
            isactive:false
          }
        },
        methods:{
          activate:function (event) {
                 this.checked  = !this.checked;
                 this.isactive = this.checked;
          }
        }
      };

    </script>

    <style scoped>

    .switchery{
      width: 40px;
      height: 20px;
      border-radius: 20px;
      background-color: #09c;
      cursor: pointer;
      position: relative;
    }

    .switchery-check{
      transition: all 5s !important;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 20px;
      background-color: #fff;
      border-radius: 100%;
    }

    .active.switchery-check {
      right: 0 !important;
      left: auto !important;
    }
    </style>

Answer 1

问题是right和left并没有触发动画，但是您的转换配置很好，看看background: red;是如何完美地转换的：

​

new Vue({
  el: '#app',
  data: function() {
    return {
      isactive: false
    }
  },
  methods: {
    activate: function(event) {
      this.checked = !this.checked;
      this.isactive = this.checked;
    }
  }
})

.switchery {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: #09c;
  cursor: pointer;
  position: relative;
}

.switchery-check {
  transition: all 5s !important;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background-color: #fff;
  border-radius: 100%;
}

.active.switchery-check {
  background: red; /* added for demo */
  right: 0 !important;
  left: auto !important;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="switchery" @click="activate">
    <div class="switchery-check" v-bind:class="{active:isactive}"></div>
  </div>
</div>

​

对于您的情况，一种选择是transform: translate(100%);，而不是right和left

​

new Vue({
  el: '#app',
  data: function() {
    return {
      isactive: false
    }
  },
  methods: {
    activate: function(event) {
      this.checked = !this.checked;
      this.isactive = this.checked;
    }
  }
})

.switchery {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: #09c;
  cursor: pointer;
  position: relative;
}

.switchery-check {
  transition: all 5s !important;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20px;
  background-color: #fff;
  border-radius: 100%;
}

.active.switchery-check {
  background: red; /* added for demo */
  transform: translate(100%);
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="switchery" @click="activate">
    <div class="switchery-check" v-bind:class="{active:isactive}"></div>
  </div>
</div>

​