0
Wie Übergang Animation auf Änderung Klasse fa-toggle-off mit fa-toggle-onIch habe eine Vue JS Vorlage, wie man Toggle Animation erstellt?
Ich habe diesen Code
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>
Siehe [docs] (https://vuejs.org/v2/guide/transitions.html) und diese [aktualisiert Geige] (https: // jsfiddle. net/d2xog757/5 /) –
@RoyJ kein Quadrat, Schaltfläche –
Sie müssen separate Elemente für jeden Zustand der Umschaltfläche haben, damit einer ausblendet und der andere einblendet. Sie können den Knopf nicht haben bewegen sich reibungslos von einer Seite zur anderen, weil es keine Taste gibt, gibt es nur zwei Symbole. –