我有一个 Vue JS 模板如何创建切换动画?
Posted
技术标签:
【中文标题】我有一个 Vue JS 模板如何创建切换动画?【英文标题】:i have a Vue JS template how to create toggle animation? 【发布时间】:2017-12-07 05:15:42 【问题描述】:如何在更改类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
【问题讨论】:
见docs和这个updated fiddle @RoyJ 没有正方形,按钮 您需要为切换按钮的每个状态设置单独的元素,以便一个可以淡出,另一个可以淡入。您将无法让按钮从一侧平滑移动到其他因为没有按钮,只有两个图标。 【参考方案1】:您的切换包含两个字体图标,因此无法为字体图标的一部分设置动画。
这就像将字母“A”设置为“V” - 只需垂直翻转字母并删除“A”的中间线。 (不可能)
Here is example of correct implementation of animated toggle button.
fiddle example
【讨论】:
以上是关于我有一个 Vue JS 模板如何创建切换动画?的主要内容,如果未能解决你的问题,请参考以下文章