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