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

0

В этом плунге у меня есть угловая анимация, которая появляется и скользит в 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>
Теги:

1 ответ

1
Лучший ответ

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

Если нет, попробуйте перевести div, добавив это в свой CSS:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню