Перемещение (вместо показа) div в Угловая анимация

Question

In this plunk У меня есть Угловая анимация, которая появляется и скользит в div справа. Мне нужен эффект «drawer», когда край div отображается для пользователя, чтобы щелкнуть по нему, и только тогда div будет скользить. Это означает, что сначала div должен быть частично показан. Поскольку оригинальная анимация выполняется из скрыть, чтобы показать (а не от шоу до шоу), я не знаю, как подойти к этому. Есть идеи?

CSS:

.panel{ 
position: fixed; 
top: 10px; 
right: -2px; 

} 

.panel.ng-hide { 
    right: -200px; 
} 
.panel.ng-hide-add, .panel.ng-hide-remove { 
    /* this is required as of 1.3x to properly 
    apply all styling in a show/hide animation */ 
    transition: 0s linear all; 
} 


.panel.ng-hide-add-active, .panel.ng-hide-remove-active { 
/* -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
*/ 
transition: all ease-in-out 2s; 
} 
.panel.ng-show-add-active { 
    display: block; 
} 

HTML:

Show <input type="checkbox" ng-model="checked" /> 
<div class="panel" ng-show="checked" 
      style="border:1px solid #dddddd;background:orange;width:200px"> 
     <input type="checkbox" /> Charts <br /> 
     <input type="checkbox" /> Reports <br /> 
     <input type="checkbox" /> Files <br /> 
</div> 

Answer 1

Если вы хотите что-то вроде SideNav на Android, вы должны попробовать Угловое материал и использовать уже внедренную SideNav вместо создания собственных.

Если нет, попробуйте translate в DIV, добавив в ваш CSS:

div { 
    transform: translate(-50px,0px); 
}