Mais conteúdo relacionado
Desafios de Performance Web - BrazilJS
- 57. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
- 58. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
.cartao.remove {
position: absolute;
}
- 59. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
- 60. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
- 61. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
- 62. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
- 63. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
- 64. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
- 65. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
- 66. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
- 67. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
.anima .cartao {
transition: 500ms ease-out;
}
.anima .cartao.remove {
opacity: 0;
}
- 68. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
disparaAnimacao();
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
- 69. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
- 70. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}
- 71. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
this.addEventListener('transitionend', aposAnimacao);
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}