last day (15 days later) » 

9:51 AM
2
Q: Animação CSS de entrada e saída de elemento ao fazer scroll na página

brasofiloEstou fazendo um div aparecer com animação de entrada quando o scroll atinge um ponto da página, o problema é que não consigo fazer a animação de saída quando o scroll retorna. O <div class="box"></div> tem o seguinte CSS: .box { right: -384px; visibility: hidden; -webkit-transition...

 
Fiz um outro fiddle bem básico, pois talvez o Scroll nem seja importante. . . . PS: não editei este link na pergunta pq senão aparece "modificado por" em vez de "perguntado por" lá na página principal e eu modifico demais :)
 
Você faz o movimento pelo CSS, não é? E se você fizesse um move-left e move-right para entrada e saida?
 
Sim, o movimento é puro CSS, o jQ só adiciona/remove a classe. Acho que minha pergunta real é como fazer um swap de classes que anime as duas.
 
Fiz um exemplo bem simples no jsfiddle. Não tenho tempo agora para incrementar o codigo, mas separei o evento entrada e saida. ficou manual right: -343px;, mas pode mudar pelo js depois. Espero que ajude
 
Ahn, claro, tem que separar a animação em duas classes extras e tirar fora do box inicial. Só, resolve total! Resposta, please :) Nem precisa complicar muito, acho que é uma coisa básica tipo isto
 
9:51 AM
Funcionou legal esse que você fez agora
 
mehor aqui, já abriu uma sala só pra isso :) @PapaCharlie
 
kkkkk esqueci
 
é, fui lá no Estouro e vc não tava
vim aqui
e aparecia
 
eu entrei la
quer voltar pra la?
 
depende, se é pra falar da pergunta, melhor aqui
 
9:55 AM
sim, é da pergunta
resolveu?
 
ficou tchuris, era super simples, tava me complicando todo
yes, valeu :))
 
bom que resolveu
Mas nem curti a minha resposta, esta muito superficial.
css calculado no olho
alterei umas propriedades para ficar facil de exemplificar
 
só acho que falta explicar no começo da resposta qual a solução: remover a animação do div principal e passar pra classes separadas
 
é o tempo curto :)
 
ou seja, eu tava aplicando a animação em .box, quando na verdade tem que ser .left + right
 
9:59 AM
sim, e perceba que o calculo da entrada esta errado,
o evento de saida é acionado a todo instante
 
mas, não tem mistério, o exemplo de código deixa claro
 
pra eu responder: remover a animação do div principal e passar pra classes separadas
vou ter que colar o cod. anterior seu?
 
nada
 
vou aproveitar o seu la de cima
vou tentar dar uma arrumada
 
acho que tá beleza do jeito que tá
 
10:01 AM
nesse bloco "$('.box').addClass('motionL');"
se você inserir um alerta, será disparado a todo instante
o calculo esta errado
ela não remove apenas quando esta dentro, ela executa a todoinstante
 
é, é fato, ele tá tirando/colocando classes o tempo todo
 
sim
você viu minha resposta no scroll infinito?
abordei esse problema
 
legal, link?
 
4
A: Problemas em conteudo sobre demanda (infinite scroll)

Papa CharlieFiz um exemplo calculando a distância da div loader em relação à tela. Quando o loader entrar na tela, será feito o carregamento do conteúdo. No exemplo eu simulo uma página com altura de 2000px para ilustrar a entrada e a saída da div loader e os valores calculandos. Pode ver aqui no jsfiddle. ...

ha viu, foi sobre o gif
use a altura do BOX para calcular a entrada e saida. vai ficar perfeito
 
yeah!
no dia que vi a resposta não tinha captado
bacana, vou implementar
gracias!
 
10:09 AM
vou ajustar alguma coisa na resposta, mas o tempo esta curto agora
 
belê
Acho que pode ser o tema de uma nova pergunta, mas em principio a técnica sua la no infinite scroll não funciona com um elemento com position: fixed
 
ajustei um pouco pergunta
mais tarde eu testo o infinite scroll no seu caso pra ver o que consigo.
 
Ali, a questão é mostar o div quando o scroll atingir X% da tela
pra não ficar aplicando add/remove/Class toda hora coloquei
if( !$('.box').hasClass('motionR') ) { ADICIONAR/REMOVER }
mas no fim é uma troca de addClass-todaHora por hasClass-todaHora
 
10:24 AM
sim, uma condição if pode resolver, quando entra cria uma 'var status = open' e verifica o status quando movimentar
se descer a tela e status='open', nao faz nada - quando for a hora de remover a div faz status='close'
algo nessa linha
 
total, vou fuçar isso
a resposta tá ++
vlw!
 
valeu fera, hora de ir :)
depois dou um up na questão
abraços e bom dia :)
 
abração, brou
buenos dias :)
 
10:53 AM
@brasofilo atualizando a questão com a validação de status!!
 
 
3 hours later…
1:30 PM
não tinha visto esta mensagem o_O @PapaCharlie
até fez o barulho mas tava aberto o chat principal, a notificação fica acima
fiz uma validação um pouco diferente, vou comentar com um link lá no site
 
 
7 hours later…
8:09 PM
@brasofilo, no motionL você pode tirar right: -343px, aqui funcionou legal, assim não precisa definir no "olho" o movimento de retirada da div
 
8:47 PM
@papa, pode crer, não tinha prestado atenção que vc tinha tirado isso no seu fiddle
cool!
 
problema resolvido?
detesto dar resposta capenga kkkk
 
pô, qualé, vc já tinha respondido só nos comentários :P
 
é vicio :)
beleza então, a gente se vê na proxima :)
 
se vemoX
vlw!
 
8:52 PM
t+
:)
 

last day (15 days later) »