0

Is it possible to use several css classes for transition ?

If I have this CSS :

.fade {
  opacity: 0;
  transition: opacity .5s linear;
}
.left {
  left: 10px;
  transition: left .3s ease;
}

Then I can't use the 2 classes on 1 html element, one transition property will override the other. I know I could create a class .fade-left which would do both (see this question), but I'd like to keep this modularity.

Is there a way to add both transitions ?

Community
  • 1
  • 1
Elodie Prevot
  • 23
  • 4
  • Having multiple classes that set the same property is no different than having a single class set the same property twice. – cimmanon Apr 26 '16 at 12:41
  • @cimmanon Won't that override the transition? – Praveen Kumar Purushothaman Apr 26 '16 at 12:42
  • @PraveenKumar That's the point I'm trying to make. If I write `.foo { color: red } .bar { color: green }`, it is the same as writing `.foo.bar { color: red; color: green }`. – cimmanon Apr 26 '16 at 12:43
  • @cimmanon So there'll be only one colour. Green. Not both. But in this case, we need both the transitions. – Praveen Kumar Purushothaman Apr 26 '16 at 12:44
  • 1
    I'm just covering my ass here in case the OP comes back and says "but that question is about having a single class, I want to have multiple classes!" – cimmanon Apr 26 '16 at 12:45
  • @cimmanon `transition` can be an array, while `color` is a single value. Do you understand where I come to? – Praveen Kumar Purushothaman Apr 26 '16 at 12:48
  • If I wanted to have a single class .fade-left, I could apply both transitions. I thought I could be able to apply 2 independent classes, not creating one especially for this case (see comment on @PraveenKumar answer) – Elodie Prevot Apr 27 '16 at 08:20
  • @ElodiePrevot What part of anything I said do you not understand? – cimmanon Apr 27 '16 at 11:05
  • @cimmanon I could ask you the same question, but I can imagine it's my fault if I'm not clear. Maybe there is a way to define a transition only for one property with sass ? Something like "transition-opacity: .2s linear" ? So that the 2 animations don't override themselves. – Elodie Prevot Apr 27 '16 at 12:35
  • Sass doesn't have magic specification defying powers, it can only compile to CSS. I don't know how you can sit there and not "get" that trying to use 2 classes to set the transition property is no different from using 2 classes to set any other property in existance. – cimmanon Apr 27 '16 at 12:40
  • Well, you can set the font-family AND the font-size because they are both about font but they don't contradict. It seems to me that a transition on opacity and a transition on left are not contradicting each other. I don't know all css properties, there could be some property like opacity-transition or so. Or some other way than defining a css transition property. Or maybe by adding a transition in the end of the array instead of replacing the hole array. And if you can't think of another way than to create a .fade-left class, then it's not a big deal to say it without insulting me – Elodie Prevot Apr 27 '16 at 16:22

1 Answers1

0

You need to use this way for using multiple transitions:

transition: opacity .5s linear, left .3s ease;

Expanded way:

-webkit-transition: opacity .5s linear, left .3s ease;
   -moz-transition: opacity .5s linear, left .3s ease;
    -ms-transition: opacity .5s linear, left .3s ease;
        transition: opacity .5s linear, left .3s ease;

Since the other class doesn't change the left property, you don't need to worry. In simple ways, you can use all.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Thank you for your help, but this is what I would write if I wanted to create a .fade-left class, which I don't. When I want a button to be big and red, I can add 2 classes .big and .red to it, no need to create a class .big-red because they change 2 independent CSS properties. A transition on left and a transition on opacity are 2 independent actions too, I thought there was a way to keep these separate classes. – Elodie Prevot Apr 27 '16 at 08:16
  • @ElodiePrevot I don't think that's possible. – Praveen Kumar Purushothaman Apr 27 '16 at 08:27