gpt4 book ai didi

html - 切换按钮滑动动画

转载 作者:行者123 更新时间:2023-11-28 02:03:58 25 4
gpt4 key购买 nike

我正在尝试使用 2 个选项卡实现滑动按钮 onclick of button 它应该滑动并显示其他状态(on->off & off->on)这是完美的,但我需要添加滑动动画来改变这个我我正在使用 Angular 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;
}

}




}

最佳答案

由于您隐藏和显示 ON 和 OFF 两个不同的 html 代码,因此很难获得相同的动画。您可以使用 angular2 使用单个 html 部分获得相同的功能,您也可以使用它来制作动画。请尝试以下代码。它对我有用。

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>

切换.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";
}
}
}

切换.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;
}

希望这对您有所帮助。

关于html - 切换按钮滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49127672/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com