Как подружить свойства display, opacity и transition?
Свойство display не анимируется. Использую так
.elem {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
} 

.elem.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
Плюс транзишн и трансформ если нужно
Если нужно анимировать появление, то можно использовать animation:
snippet