web-dev-qa-db-fra.com

Transition CSS pour un seul type de transformation?

Est-il possible d'animer (en utilisant des transitions) un seul type de transformation CSS?

J'ai css:

cell{
  transform: scale(2) translate(100px, 200px);
  transition: All 0.25s;  
}

Maintenant, je veux que seule l'échelle soit animée. Dans ce cas, je pourrais utiliser les propriétés position: absolue et gauche/droite, mais pour autant que je m'en souvienne, translate () est bien meilleure en termes de performances. Je voudrais également éviter d'utiliser des éléments html supplémentaires.

Violon: http://jsfiddle.net/6UE28/2/

css3transformtransition
35
cimak

Oui! Vous le séparez en deux sélecteurs, l'un d'eux avec transition: none, puis déclenchez une redistribution CSS entre les deux pour appliquer le changement (sinon il sera considéré comme un seul changement et fera la transition).

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  el.offsetHeight; /* CSS reflow */
  el.classList.add('moved');
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
10
user

Non! vous ne pouvez pas utiliser transition uniquement pour une certaine valeur de transform comme scale(2).

Une solution possible serait la suivante: (désolé, vous devez utiliser du html supplémentaire)

HTML

<div class="scale">
<div class="translate">
Hello World
</div>
</div>

CSS

div.scale:hover {
    transform: scale(2);
    transition: transform 0.25s;
}
div.scale:hover div.translate {
    transform: translate(100px,200px);
}
32
Barun

Oui pourquoi pas. Pour ce faire, vous devez en fait utiliser une seule transformation.

C'est ce qui vous embrouille: vous n'appliquez pas de transformation sur l'élément lui-même. Vous appliquez cela à l'état de changement (au moyen d'une pseudo-classe comme :hover ou une autre classe utilisant les styles que vous souhaitez dans l'état modifié). Veuillez voir le commentaire de @ David sur votre question. Vous changez d'état uniquement pour cette propriété que vous souhaitez modifier et qui va s'animer.

Ainsi, vous les changez de manière sélective en fonction de l'état modifié.

Solution 1: Utiliser Javascript (basé sur le violon que vous avez fourni dans votre question)

Démo: http://jsfiddle.net/abhitalks/6UE28/4/

CSS pertinent:

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

jQuery pertinent:

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5)"
    });
});

// OR 

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "translate(100px, 100px)"
    });
});

// OR

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5) translate(100px, 100px)"
    });
});

Solution 2: Utilisation de CSS uniquement

Démo 2: http://jsfiddle.net/abhitalks/4pPSw/1/

CSS pertinent:

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

div:hover {
    -webkit-transform: scale(0.5);
}

/* OR */

div:hover {
    -webkit-transform: translate(100px, 100px);
}

/* OR */

div:hover {
    -webkit-transform: scale(0.5) translate(100px, 100px);
}
3
Abhitalks

Au lieu de forcer un reflow , vous pouvez utiliser à la place setTimeout.

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  setTimeout(function() {el.classList.add('moved');})
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
0
Raphael Rafatpanah