Question

我正在尝试使用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;
        }

    }




    }

Answer 1

由于你隐藏并显示了两个不同的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;
       }

希望这有帮助。

切换按钮幻灯片动画

1 个答案: