javascript - transiciones - menus en html codigo
Reinicie la animación en CSS3: ¿una forma mejor que eliminar el elemento? (5)
Cree un segundo "fotograma clave" que reinicie su animación, solo un problema con esto; no puede establecer ninguna propiedad de animación para la animación de reinicio (simplemente aparece un poco)
----- HTML -----
<div class="slide">
Some text..............
<div id="slide-anim"></div>
</div><br>
<button onclick="slider()"> Animation </button>
<button id="anim-restart"> Restart Animation </button>
<script>
var animElement = document.getElementById(''slide-anim'');
document.getElementById(''anim-restart'').addEventListener("mouseup", restart_slider);
function slider() {
animElement.style.animationName = "slider"; // other animation properties are specified in CSS
}
function restart_slider() {
animElement.style.animation = "slider-restart";
}
</script>
----- CSS -----
.slide {
position: relative;
border: 3px black inset;
padding: 3px;
width: auto;
overflow: hidden;
}
.slide div:first-child {
position: absolute;
width: 100%;
height: 100%;
background: url(wood.jpg) repeat-x;
left: 0%;
top: 0%;
animation-duration: 2s;
animation-delay: 250ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.33,.99,1,1);
}
@keyframes slider {
to {left: 100%;}
}
@keyframes slider-restart {
to {left: 0%;}
}
Tengo una animación CSS3 que debe reiniciarse con un clic. Es un bar que muestra cuánto tiempo queda. Estoy usando la transformación scaleY (0) para crear el efecto.
Ahora necesito reiniciar la animación restaurando la barra a scaleY (1) y dejándola volver a scaleY (0). Mi primer intento de establecer scaleY (1) falló porque tarda los mismos 15 segundos en volver a la longitud completa. Incluso si cambio la duración a 0.1 segundos, necesitaría retrasar o encadenar la asignación de scaleY (0) para completar el reabastecimiento de la barra. Se siente demasiado complicado para una tarea tan simple.
También encontré un consejo interesante para reiniciar la animación eliminando el elemento del documento y luego volviendo a insertar un clon: http://css-tricks.com/restart-css-animation/
Funciona, pero ¿hay una mejor manera de reiniciar una animación CSS? Estoy usando Prototype y Move.js , pero no estoy restringido a ellos.
No necesita tiempo de espera, use reflow para aplicar el cambio:
function reset_animation() {
var el = document.getElementById(''animated'');
el.style.animation = ''none'';
el.offsetHeight; /* trigger reflow */
el.style.animation = null;
}
#animated {
position: absolute;
width: 50px; height: 50px;
background-color: black;
animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
0% { left: 0; }
50% { left: calc( 100% - 50px ); }
100% { left: 0; }
}
<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>
Si tiene alguna clase para animación css3, para exapmle .blink entonces puede eliminarClass para algún elemento y addClass para este elemento pensado setTimeout con 1 milisegundo por clic.
$("#element").click(function(){
$(this).removeClass("blink");
setTimeout(function(){
$(this).addClass("blink);
},1 ///it may be only 1 milisecond, it''s enough
});
Simplemente configure la propiedad de la animation través de JavaScript en "none" y luego configure un tiempo de espera que cambie la propiedad a "" , por lo que hereda de nuevo el CSS.
Demo para Webkit aquí: http://jsfiddle.net/leaverou/xK6sa/ Sin embargo, tenga en cuenta que en el uso del mundo real, también debe incluir -moz- (al menos).
en esta página puede leer sobre reiniciar la animación del elemento: https://css-tricks.com/restart-css-animation/ aquí está mi ejemplo:
<head>
<style>
@keyframes selectss
{
0%{opacity: 0.7;transform:scale(1);}
100%{transform:scale(2);opacity: 0;}
}
</style>
<script>
function animation()
{
var elm = document.getElementById(''circle'');
elm.style.animation=''selectss 2s ease-out'';
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
</script>
</head>
<body>
<div id="circle" style="height: 280px;width: 280px;opacity: 0;background-color: aqua;border-radius: 500px;"></div>
<button onclick="animation()"></button>
</body>
pero si lo desea, puede eliminar la animación del elemento y luego devolverla:
function animation()
{
var elm = document.getElementById(''circle'');
elm.style.animation='''';
setTimeout(function () {elm.style.animation=''selectss 2s ease-out'';},10)
}
¡Espero haber ayudado!