How to combine multiple "transition" rules?

The transitions are declared on the same elements so even if you use different classes to declare them, the transition property is overriden by the second transition declaration.

You can transition several properties like height and opacity if you declare them in one declaration seperated by a comma using this syntax (check w3.org for reference) :

transition: opacity 1s, height 2s;

Your code should look like this :

.active_only {
    opacity:0;
    transition:opacity 1s, height 2s;
}
.activator:hover .active_only {
    opacity:1;
}
.elastic {
    height:20px;
}
.elastic:hover {
    height:40px;
}
li {
    border:1px solid red;
}

<div class="activator">Here's a magic list
    <ul>
        <li class="elastic active_only">item one</li>
        <li class="elastic active_only">item two</li>
    </ul>
</div>

You can do it either using all for making all properties that are changing to have transition or by using comma separated values if you want only selected (but multiple) properties to have transition.

.active_only {
    opacity: 0;
    -webkit-transition: height 1s, opacity 1s;
    -moz-transition: height 1s, opacity 1s;
    transition: height 1s, opacity 1s;
}

or

.active_only {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.active_only {
  opacity: 0;
  -webkit-transition: height 1s, opacity 1s;
  -moz-transition: height 1s, opacity 1s;
  transition: height 1s, opacity 1s;
}
.activator:hover .active_only {
  opacity: 1;
}
.elastic {
  height: 20px;
}
.elastic:hover {
  height: 40px;
}
li {
  border: 1px solid red;
}

<div class="activator">
  Here's a magic list
  <ul>
    <li class="elastic active_only">item one</li>
    <li class="elastic active_only">item two</li>
  </ul>
</div>

Using CSS Transitions - MDN Guide