我有一个 Vue JS 模板如何创建切换动画？

Question

如何在更改 class fa-toggle-off 和 fa-toggle-on

时创建过渡动画

我有这个代码

Vue.component('ios-button', {
    template: '#iosButton',
    data:function(){
      return {
        toggled:true,
        label:'',
      }
    },
    methods:{
      change:function(){
        this.toggled=!this.toggled;
        this.$emit('change');
      }
    }
  });
new Vue({
  el:"#square",
  data:{
    show:true,
  },
  methods:{
    checkIfCheched:function(){
      this.show=!this.show;
    }
  }
});

.square{
  width:100px;
  height:100px;
  margin:0 auto;
  background-color:red;
}
#square{
  height:110px;

}
#square span{
  font-size:25px;
  cursor:pointer;
  transition: all 0.9s ease;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id='square' class='text-center'>
    <ios-button v-on:change='checkIfCheched'></ios-button>
    <div class='square' v-show='show'>
    </div>
</div>
<template id="iosButton">
     <span class="fa toggle" v-bind:class="{'fa-toggle-on': toggled, 'fa-toggle-off': !toggled, 'text-success': toggled, 'text-muted': !toggled}" v-on:click="change"><span class="toggle-label">{{label}}</span></span> 
</template>

jsfiddle my example

Answer 1

您的切换包含两个字体图标，因此无法为部分字体图标设置动画。

这就像将字母 "A" 动画化为 "V" - 只需垂直翻转字母并删除 "A" 的中间线。（不可能）

Here is example of correct implementation of animated toggle button.

fiddle example

我有一个 Vue JS 模板如何创建切换动画？

i have a Vue JS template how to create toggle animation?

jquery

animation

vue.js

vue-component

vuejs2