Hi @PeteSharp Pete, with satisfaction finally I can say that I have solved the problem for this Topic, and just like I wanted it to be. Finally Display-none, Opacity and Transition live together under one roof and it also seems in perfect family harmony, no more fights, especially in my head 
.
Anyway I used .addEventListener () and setTimeout () to complete the function making sure that the opacity transitions are not cut off by the immediacy of none / block (on / off) display.
Exciting little improvements from a novice beginner like me 
thanks for the valuable clues and advice 