我有一個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

來源

2017-07-03 vali ntin

參見[文檔]（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

來源

2017-07-04 13:54:52

ohhh謝謝你 –

我有一個Vue JS模板如何創建切換動畫？

回答

相關問題