我正在尝试使用2个标签实现滑动按钮，只需点击按钮，它应该滑动并显示其他状态（on-＆gt; off＆amp; off-＆gt; on）这是完美的工作，但我需要添加滑动动画改变这个我使用角度2 感谢任何帮助，下面给出了代码片段。
<div class="tog-button" [hidden]=!showOnbutton>
<div class="tog-button-off" (click)="showOnbutton = !showOnbutton;updateValues()">
<div class="line-bar"></div>
<div class="line-bar"></div>
<div class="line-bar"></div>
</div>
<div class="tog-button-on">
ON
</div>
</div>
<div class="tog-button-black" [hidden]=showOnbutton>
<div class="tog-button-on-state" (click)="showOnbutton = !showOnbutton;updateValues()">
<div class="line-bar"></div>
<div class="line-bar"></div>
<div class="line-bar"></div>
</div>
<div class="tog-button-off-state">
OFF
</div>
</div>
以下css用于样式
.tog-button-black{
height: 37px;
margin: 6% 21% 5% 24%;
/* border: solid 1px #E86056; */
/* background-color: #FFFFFF; */
/* background-color: #B2B2B2; */
background-color: #B2B2B2;
// -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(114, 114, 114, 0.5);
// box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(114, 114, 114, 0.5);
/* background-color: #B2B2B2; */
padding: 2px;
// padding-left: 15%;
.line-bar{
box-sizing: border-box;
border: 1px solid #E8E8E8;
width: 1px;
height: 15px;
/* margin: 0px auto; */
float: left;
/* text-align: center; */
margin: 4px 0px 0px 7px;
}
.tog-button-on-state{
height: 33px;
width: 48%;
text-align: center;
/* background-color: #E86056; */
color: white;
/* background-color: #E86056; */
/* -webkit-clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%); */
clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
float: left;
background-color: white;
color: #E8E8E8;
padding-top: 6px;
padding-left: 12%;
}
.tog-button-off-state{
webkit-clip-path: polygon(17% 100%, 103% 125%, 100% 0%, 0 0%);
clip-path: polygon(17% 100%, 103% 125%, 100% 0%, 0 0%);
/* background-color: #e2dcdc; */
width: 52%;
float: right;
text-align: center;
height: 33px;
/* background-color: #B2B2B2; */
padding-top: 8px;
color: white;
//padding-left: 11%;
}
}
.tog-button{
///height: 33px;s
margin: 6% 21% 5% 24%;
// -webkit-box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
// box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
//ackground-image: -webkit-linear-gradient(-57deg, #fffefe 51%, transparent 0%);
border: solid 1px #E86056;
.tog-button-on{
height: 32px;
width: 55%;
text-align: center;
background-color: #E86056;
color: white;
// background-image: -webkit-linear-gradient(196deg, #fffefe 8%, transparent 0);
/* background-color: #E86056; */
-webkit-clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
padding-top: 8px;
}
.tog-button-off{
background-color: white;
height: 30px;
width: 51%;
float: right;
text-align: center;
color: #E8E8E8;
padding: 3px;
padding-left: 15%;
/* border: 1px solid #E8E8E8; */
.line-bar{
box-sizing: border-box;
border: 1px solid #E8E8E8;
width: 1px;
height: 15px;
/* margin: 0px auto; */
float: left;
/* text-align: center; */
margin: 4px 0px 0px 7px;
}
}
}
答案 0 :(得分：0)
由于你隐藏并显示了两个不同的html代码用于ON和OFF，因此很难获得相同的动画。您可以使用angular2使用单个html部分获得相同的功能，您也可以使用angular2进行动画处理。 请尝试以下代码。它对我有用。
toggle.component.html
<div class="myContainer">
<div class="tog-button" [ngClass]="{'Off':!showOnbutton,'On':showOnbutton}">
<div class="tog-button-off" (click)="showOnbutton = !showOnbutton;updateClick();">
</div>
<div class="tog-button-on" [ngClass]="{'On':showOnbutton,'Off':!showOnbutton}" (click)="showOnbutton = !showOnbutton;updateClick();">
{{clickData}}
</div>
</div>
</div>
toggle.component.ts
export class ToggleComponent {
private showOnbutton:boolean = true;
private clickData:string = "ON";
constructor(){
this.clickData = "ON";
this.showOnbutton = true;
}
private updateClick(){
if(this.showOnbutton){
this.clickData = "ON";
}else{
this.clickData = "OFF";
}
}
}
toggle.css
.myContainer{
width:100px;
}
.tog-button{
height: 37px;
// -webkit-box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
// box-shadow: inset 0 1px 3px 0 rgba(85, 85, 85, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
//background-image: -webkit-linear-gradient(-57deg, #fffefe 51%, transparent 0%);
border: solid 2px #E86056;
}
.tog-button-on{
height: 35px;
width: 55%;
text-align: center;
background-color: #E86056;
color: white;
// background-image: -webkit-linear-gradient(196deg, #fffefe 8%, transparent 0);
/* background-color: #E86056; */
-webkit-clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
clip-path: polygon(0% 100%, 103% 122%, 87% 0%, 0 0%);
padding-top: 8px;
cursor: pointer;
}
.tog-button-off{
background-color: white;
height: 30px;
width: 51%;
float: right;
text-align: center;
color: #E8E8E8;
padding: 3px;
padding-left: 15%;
cursor: pointer;
/* border: 1px solid #E8E8E8; */
}
.tog-button-on.Off{
background-color: #B2B2B2;
transform: translateX(43px);
transition: all 0.2s linear;
-webkit-clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
clip-path: polygon(0% -13%, 18% 120%, 397% 0%, 0 0%);
}
.tog-button.Off{
border:2px solid #B2B2B2;
}
.tog-button-on.On{
background-color: #E86056;
transform: translateX(0px);
transition: all 0.2s linear;
-webkit-clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
clip-path: polygon(0% 305%, 101% 157%, 89% 0%, 0 0%);
}
.tog-button.On{
border:2px solid #E86056;
}
希望这有帮助。