I know, this is not really a solution for your question, because you ask for

display + opacity

My approach solves a more general question, but maybe this was the background problem that should be solved by using display in combination with opacity.

My desire was to get the Element out of the way when it is not visible. This solution does exactly that: It moves the element out of the away, and this can be used for transition:

.child {
  left: -2000px;
  visibility: hidden;
  -moz-transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
  -webkit-transition: left 0s, visibility 0s, opacity 0.8s;
  -webkit-transition-delay: 0.8s, 0.8s, 0s;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}
.parent:hover .child {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  left: 0;
  visibility: visible;
  -moz-transition: left 0s, visibility 0s, opacity 0.8s;
  -webkit-transition: left 0s, visibility 0s, opacity 0.8s;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

I hope I hit the nail on the head for this question although I did not answer it.

I know, this is not really a solution for your question, because you ask for

display + opacity

My approach solves a more general question, but maybe this was the background problem that should be solved by using display in combination with opacity.

My desire was to get the Element out of the way when it is not visible. This solution does exactly that: It moves the element out of the away, and this can be used for transition:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
} 

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

This code does not contain any browser prefixes or backward compatibility hacks. It just illustrates the concept how the element is moved away as it is not needed any more.

The interesting part are the two different transition definitions. When the mouse-pointer is hovering the .parent element the .child element needs to be put in place immediately and then the opacity will be changed:

transition: left 0s, visibility 0s, opacity 0.8s;

When there is no hover, or the mouse-pointer was moved off the element, one has to wait until the opacity change has finished before the element can be moved off screen:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Moving the object away will be a viable alternative in a case where setting display:none would not break the layout.

I hope I hit the nail on the head for this question although I did not answer it.

I know, this is not really a solution for your question, because you ask for

display + opacity

My approach solves a more general question, but maybe this was the background problem that should be solved by using display in combination with opacity.

My desire was to get the Element out of the way when it is not visible. This solution does exactly that: It moves the element out of the away, and this can be used for transition:

.child {
  left: -2000px;
  -moz-transition: left 0s 1s, opacity 1s;
  -webkit-transition: left 0s, opacity 1s;
  -webkit-transition-delay: 1s, 0s;
  transition: left 0s 1s, opacity 1s;
}
.parent:hover .child {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  left: 0;
  -moz-transition: left 0s, opacity 1s;
  -webkit-transition: left 0s, opacity 1s;
  transition: left 0s, opacity 1s;
}

I hope I hit the nail on the head for this question although I did not answer it.

I know, this is not really a solution for your question, because you ask for

display + opacity

My approach solves a more general question, but maybe this was the background problem that should be solved by using display in combination with opacity.

My desire was to get the Element out of the way when it is not visible. This solution does exactly that: It moves the element out of the away, and this can be used for transition:

.child {
  left: -2000px;
  visibility: hidden;
  -moz-transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
  -webkit-transition: left 0s, visibility 0s, opacity 0.8s;
  -webkit-transition-delay: 0.8s, 0.8s, 0s;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}
.parent:hover .child {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  left: 0;
  visibility: visible;
  -moz-transition: left 0s, visibility 0s, opacity 0.8s;
  -webkit-transition: left 0s, visibility 0s, opacity 0.8s;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

I hope I hit the nail on the head for this question although I did not answer it.