Control de interruptor animado estilo iOS 7 con JavaScript y CSS3

Vista prévia

Descripción

Un pequeño widget de JavaScript para convertir una casilla de verificación en un interruptor de encendido/apagado con estilo iOS 7 con transiciones CSS3, inspirado en < a href = "https://codepen.io/daneden/pen/aEstJ" target = "_ blank" rel = "noopener" > daneden .

Funcionamiento

Cree una casilla de verificación con dos etiquetas de alternancia.

<label class="toggler toggler--is-active" id="filt-css">CSS</label>
<div class="toggle">

<input type="checkbox" id="switcher" class="check">

<b class="b switch"></b> </div>
<label class="toggler" id="filt-javascript">Javascript</label>

Los estilos CSS/CSS3. Crea un impresionante efecto deslizante de estilo iOS 7 usando transiciones CSS3.

.toggle,
.toggler {

display: inline-block;

vertical-align: middle;

margin: 10px;
}

.toggler {

color: slategray;

transition: .2s;
}

.toggler--is-active { color: black; }

.b { display: block; }

.toggle {

width: 100px;

height: 60px;

border-radius: 100px;

background-color: #2ecc71;

overflow: hidden;

box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.check {

position: absolute;

display: block;

cursor: pointer;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

z-index: 6;
}

.check:checked ~ .switch {

right: 2px;

left: 37.5%;

transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);

transition-property: left, right;

transition-delay: .08s, 0s;
}

.switch {

position: absolute;

left: 2px;

top: 2px;

bottom: 2px;

right: 37.5%;

background-color: #fff;

border-radius: 36px;

z-index: 1;

transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);

transition-property: left, right;

transition-delay: 0s, .08s;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

El JavaScript para habilitar el control del switch.

var e = document.getElementById("filt-css"),


d = document.getElementById("filt-javascript"),


t = document.getElementById("switcher");

e.addEventListener("click", function(){

t.checked = false;

e.classList.add("toggler--is-active");

d.classList.remove("toggler--is-active");
});

d.addEventListener("click", function(){

t.checked = true;

d.classList.add("toggler--is-active");

e.classList.remove("toggler--is-active");
});

t.addEventListener("click", function(){

d.classList.toggle("toggler--is-active");

e.classList.toggle("toggler--is-active");
})