вопросов в правиле css transform

Question

SO Я новичок в css, фактически, я разработчик, но я хочу выполнить эту задачу с помощью css только в соответствии с требованиями. У меня есть div, и я хочу открыть фиксированный div на клик. я пробовал что-то, и настройка на js скрипке здесь js fiddle link. Я очень близок. Основной CSS часть

.portfolio 
{ 
     background: #218592; 
    z-index: 0; 
    opacity: 0; 
    -webkit-transform: translateX(0%); 
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
    -moz-transform: translateX(0%); 
    -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
    transform: translateX(0%); 
    transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
    -ms-transform: translateX(0%); 
    height: 100%; 
    width: 100%; 
    position: fixed; 
     top: 0; 
    left: 0; 
} 
.display-work 
{ 
    z-index: 1000; 
    opacity: 1; 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 

    transform: translateX(-100%); 

    -ms-transform: translateX(-100%); 

} 

полный код доступен на JS скрипку

Проблема

, когда я нажимаю на DIV есть два вопроса

1) DIV не будет скользить при первом щелчке (я вижу это сам не раньше)

2) фиксированный div скатывается, но она исчезает сразу

неспособный найти причину

Answer 1

вам нужно избавиться от opacity:0 и переключатель translateX места.

portfolio{ 
      background: #218592; 
     z-index: 0; 
     -webkit-transform: translateX(100%); 
    -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
     -moz-transform: translateX(100%); 
     -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
     transform: translateX(100%); 
     transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
     -ms-transform: translateX(100%); 
     height: 100%; 
     width: 100%; 
     position: fixed; 
      top: 0; 
     left: 0; 
    } 
    .display-work 
    { 
     z-index: 1000; 
     -webkit-transform: translateX(0%); 
     -moz-transform: translateX(0%); 

     transform: translateX(0%); 

     -ms-transform: translateX(0%); 

    } 

Вот неподвижная fiddle