11

Estou criando um CSS que simula cartas de um baralho, com cartas e mãos de carta. Quando uma carta de uma mão for selecionada ela é destacada acima das outras.

Isso funciona bem, porém eu gostaria de aplicar um efeito de transição para quando a carta for destacada. Tentei de algumas formas sem sucesso.

Segue o código abaixo:

HTML:

<body>
    <br /><br />
    <div class="hand">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>

CSS:

.card {
    width: 140px;
    height: 190px;
    border: 1px solid #aaa;
    border-radius: 7px;
    box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    background: white;
}
.hand {
    position: relative;
}
.hand .card {
    position: absolute;
    transition: top .5s;
}
.hand .card:hover, .hand .card.selected {
    top: -2em;
}
.hand .card:nth-child(1)  { left: 1.1em; }
.hand .card:nth-child(2)  { left: 2.2em; }
.hand .card:nth-child(3)  { left: 3.3em; }
.hand .card:nth-child(4)  { left: 4.4em; }
.hand .card:nth-child(5)  { left: 5.5em; }
.hand .card:nth-child(6)  { left: 6.6em; }
.hand .card:nth-child(7)  { left: 7.7em; }
.hand .card:nth-child(8)  { left: 8.8em; }
.hand .card:nth-child(9)  { left: 9.9em; }

Link para o sample no JSFiddle

Esse modelo já estaria OK. O que eu preciso é que o transition funcione com o top, pra que em vez de a carta pular seja exibido um efeito, uma transição, mais suave.

2

3 Respostas 3

8

Simplesmente defina top: 0 na mesma regra onde você define a transição. Ambas as "pontas" da transição precisam estar definidas, e você só definiu a final:

.hand .card {
    position: absolute;
    transition: top .5s;
    top: 0;
}

http://jsfiddle.net/q9DBN/7/

2
  • +1 - esta é a resposta certa com o detalhe que (me) faltou
    – Sergio
    Commented 2/05/2014 às 13:58
  • 1
    De fato as diversas soluções apontadas me serviriam, mas essa foi a mais didática, pois apontou a falha e a solução...
    – iuristona
    Commented 2/05/2014 às 14:36
2

Eu sugiro usar o margin-top. Neste caso o CSS podia ser assim:

.hand .card {
    position: absolute;
    transition: margin-top 0.3s;
}
.hand .card:hover, .hand .card.selected {
    margin-top: -2em;
}

Exemplo

2

Acho que isso resolve:

.hand .card {
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transform: translate(0,0em);
    -webkit-transform: translate(0,0em);
    -o-transform: translate(0,0em); 
    -moz-transform: translate(0,0em);
}

.hand .card:hover, .hand .card.selected {
    position: absolute;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transform: translate(0,-2em);
    -webkit-transform: translate(0,-2em);
    -o-transform: translate(0,-2em); 
    -moz-transform: translate(0,-2em);
}

Usando transition-duration para definir o tempo da transição e translate(x,y) para mover a carta.

Exemplo

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .