CSS Toggle Übergang Animation

Ich habe 2 CSS-Umschaltflächen, die ich mache. Gerade jetzt, wenn Sie auf die Schaltfläche klicken, hat einen Ein- und Ausblendeffekt. Ich möchte eher wie eine von rechts nach links schiebende Animation agieren. Angehängt ist der HTML, CSS und eine l Tinte an eine Geige mit meinem Code. Vielen Dank! https://jsfiddle.net/ebgpqvha/CSS Toggle Übergang Animation

<div class="switch-field"> 
    <div class="switch-title">Hand:</div> 
    <input type="radio" id="switch_left" name="switch_2" value="yes" checked/> 
    <label for="switch_left">L</label> 
    <input type="radio" id="switch_right" name="switch_2" value="no" /> 
    <label for="switch_right">R</label> 
</div> 


     .switch-field, .switch-field2 { 
     font-family: "adiHaus", Arial, sans-serif; 
     font-size: 16px; 
     font-weight: 300; 
     margin: 0.2em; 
     overflow: hidden; 
    }  


    .switch-title { 
     margin-bottom: 6px; 
    }  

    .switch-field input, .switch-field2 input { 
     display: none; 
    }  


    .switch-field label, .switch-field2 label { 
     float: left; 
    }  


    .switch-field label { 
     display: inline-block; 
     width: 63px; 
     height: 40px; 
     background-color: #EFEFEF; 
     color: #cdcdcd; 
     font: 16px "adiHaus",Arial,sans-serif; 
     font-weight: bold; 
     text-align: center; 
     text-shadow: none; 
     padding: 10px 14px; 
     border: 1px solid rgba(0, 0, 0, 0.2); 
    border-top: #CCC solid 1px; 
    border-radius: 2px; 
     border-bottom: #EEE solid 1px; 
     border-right: #ddd solid 1px; 
     border-left: #ddd solid 1px; 
     -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
     transition:   all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
    }  

    .switch-field2 label { 
     display: inline-block; 
     width: 113px; 
     height: 40px; 
     background-color: #EFEFEF; 
     color: #cdcdcd; 
     font: 16px "adiHaus",Arial,sans-serif; 
     font-weight: bold; 
     text-align: center; 
     text-shadow: none; 
     padding: 10px 14px; 
     border: 1px solid rgba(0, 0, 0, 0.2); 
    border-top: #CCC solid 1px; 
    border-radius: 2px; 
     border-bottom: #EEE solid 1px; 
     border-right: #ddd solid 1px; 
     border-left: #ddd solid 1px; 
    -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
     transition:   all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
    }  

    .switch-field label:hover, .switch-field2 label:hover { 
     cursor: pointer; 
    }  

    .switch-field input:checked + label, .switch-field2 input:checked + label { 
     background-color: #fff; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
     color:000; 
     font-weight: bold; 
    }  

    .switch-field label:first-of-type, .switch-field2 label:first-of-type { 
    border-right: none; 
    }  

    .switch-field label:last-of-type, .switch-field2 label:last-of-type { 
    border-left: none; 
    }

Quelle

2016-05-23 sizemattic

Sie werden nicht in der Lage sein, dies mit Ihrem aktuellen HTML zu tun. Dies liegt daran, dass sie leicht getrennt werden können und immer noch funktionieren - zum Verschieben müsste es ein Kontrollkästchen sein. Etwas wie dieses: https://jsfiddle.net/CalvT/227dk2ow/ - lassen Sie mich wissen, wenn thats, was Sie wollen, und ich werde eine Antwort posten –

Sicher, jede Hilfe wird sehr geschätzt. – sizemattic

@CalvT ist richtig, es sei denn, Sie wollen einfach nur den Folie-Effekt für die bg als Beispiel https://jsfiddle.net/ebgpqvha/1/ – DaniP

Sie werden in der Lage sein nicht für diese beiden Kontrollkästchen zu verwenden. Nun, Sie könnten es wahrscheinlich, aber ich persönlich denke, es wäre viel zu chaotisch, um gut zu sein. Stattdessen sollten Sie ein Feld in Ihre Tabelle einfügen, das wie "Rechtshänder" betitelt ist und die Antwort lautet "Ja" oder "Nein".

So erstellen Sie eine Checkbox in etwa so:

ich es in einer Tabelle eingeschlossen habe, so dass ich auf beiden Seiten die linke und rechtsen hinzufügen kann.

.tgl { 
 
    display: none; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.tgl + .tgl-btn { 
 
    outline: 0; 
 
    display: block; 
 
    width: 4em; 
 
    height: 2em; 
 
    position: relative; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background: #3f9ddd; 
 
    border-radius: 2em; 
 
    padding: 2px; 
 
    -webkit-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
} 
 
.tgl + .tgl-btn:after, 
 
.tgl + .tgl-btn:before { 
 
    position: relative; 
 
    display: block; 
 
    content: ""; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.tgl + .tgl-btn:after { 
 
    left: 0; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    -webkit-transition: all .2s ease; 
 
    transition: all .2s ease; 
 
} 
 
.tgl + .tgl-btn:before { 
 
    display: none; 
 
} 
 
.tgl:checked + .tgl-btn:after { 
 
    left: 50%; 
 
} 
 
.tgl:checked + .tgl-btn { 
 
    background: #2ecc71; 
 
}

<table> 
 
    <tr> 
 
    <td colspan="3">Hand</td> 
 
    </tr> 
 
    <tr> 
 
    <td>LH</td> 
 
    <td> 
 
     <input class="tgl" id="cb1" type="checkbox"> 
 
     <label class="tgl-btn" for="cb1"></label> 
 
    </td> 
 
    <td>RH</td> 
 
    </tr> 
 
</table>

So endet das Kontrollkästchen aktiviert, wenn die Person Handed ist richtig.

Dies erfordert kein JavaScript, das CSS basiert darauf, ob das Kontrollkästchen aktiviert ist oder nicht mit dem Präfix :checked.

Quelle

2016-05-23 20:16:12

Antwort

Verwandte Themen