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

问题描述：

如何创建改变类fa-toggle-off过渡动画与fa-toggle-on我有一个Vue JS模板如何创建切换动画？

我有这样的代码

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

参见[文档]（https://vuejs.org/v2/guide/transitions.html），并且该[更新小提琴]（https：//开头的jsfiddle。 net/d2xog757/5 /） –

@RoyJ无方块，按钮 –

您需要为切换按钮的每个状态分别设置不同的元素，以便淡入淡出，另一个淡入。您将无法使用按钮因为没有按钮，所以从一侧到另一侧平稳移动，只有两个图标。 –

答

你拨动包含两个字体图标，所以它不是可以为部分字体图标设置动画。

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

Here is example of correct implementation of animated toggle button.

fiddle example

ohhh谢谢你 –

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

相关推荐