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

如何在更改类时创建过渡动画

fa-toggle-off

，同时

fa-toggle-on

我有这个密码

Vue.component（'ios-button'{
模板：“#iosButton”，
数据：函数（）{
返回{
切换：对，
标签：“”，
}
},
方法：{
更改：函数（）{
this.toggled=！this.toggled；
这是$emit（'change'）；
}
}
});
新Vue({
el:“方形”，
数据：{
秀：没错，
},
方法：{
checkifchecheched:function（）{
this.show=！this.show；
}
}
});
.square{
宽度：100px；
高度：100px；
保证金：0自动；
背景色：红色；
}
#方格{
高度：110px；
}
#方跨{
字体大小：25px；
光标：指针；
过渡：所有0.9秒缓解；
}

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

这就像将字母“A”设置为“V”的动画一样——只需垂直翻转字母并删除“A”的中间线。（不可能）

请参见和@RoyJ no square按钮。切换按钮的每个状态都需要单独的元素，以便一个可以淡出，另一个可以淡入。由于没有按钮，只有两个图标，因此无法使按钮从一侧平滑地移动到另一侧。
Here is example of correct implementation of animated toggle button.