-
-
Notifications
You must be signed in to change notification settings - Fork 321
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
how to use ngAnimate with custom modal ? #39
Comments
I finally did it without ngAnimate service. ModalController myApp.controller 'ModalConfirmController', ($scope, $timeout, $element, inputs, close) ->
angular.extend $scope, inputs
$scope.id ?= 'modal-default'
$scope.backdrop ?= true
$scope.display = true
# remove class `modal-animate-enter` after modal render
# (I am still looking for a way to do it with something like `Modal.open().then`)
$timeout ->
$element.removeClass 'modal-animate-enter'
, 300
$scope.close = (result) ->
$element.addClass 'modal-animate-leave'
$timeout ->
$scope.display = false
close result
, 500
Template .modal.modal-confirm.modal-animate-enter ng-show="display" ng-class="id"
.modal-backdrop ng-if="backdrop" ng-click="close(false)"
.modal-dialog
.modal-image ng-if="imageUrl": img ng-src="imageUrl"
.modal-title ng-if="title" ng-bind="title"
.modal-content ng-bind-html="content"
.modal-footer
button ng-click="close(false)" ng-bind="cancel.text" ng-class="cancel.class"
button ng-click="close(true)" ng-bind="confirm.text" ng-class="confirm.class" Stylesheet .modal
{
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
.modal-backdrop
{
position: absolute;
width: 100%;
height: 100%;
transition: opacity 280ms linear;
opacity: 1;
background-color: rgba(0,0,0,0.3);
}
.modal-dialog
{
position: relative;
top: 20%;
width: 650px;
max-width: 100%;
margin: 0 auto;
transition-duration: 500ms;
transition-property: transform, opacity;
transform: translateY(0);
opacity: 1;
border-radius: 10px;
background-color: $white;
box-shadow: 7px 13px 30px 0.00px rgba(75, 97, 109, 0.3);
transform-style: preserve-3d;
}
&.modal-animate-enter
{
.modal-dialog
{
transition-timing-function: cubic-bezier(0.4, 0, 0, 1.5);
transform: translateY(-200px);
}
}
&.modal-animate-leave
{
.modal-dialog
{
transition-timing-function: cubic-bezier(1.5,0,0,0.4);
transform: translateY(200px);
}
}
&.modal-animate-enter,
&.modal-animate-leave
{
.modal-dialog,
.modal-backdrop
{
opacity: 0;
}
}
} |
Thanks for sharing your code, I'll leave this issue open for now so others can find it easily. |
It'd be nice to have a version of this code written in standard typing, I'm assuming this is typescript or coffee script or some extended syntax I'm not familiar with.. :< |
@LunarDevelopment yes javascript is written in coffee, css in sass and html with slim. ModalController myApp.controller('ModalConfirmController', function($scope, $timeout, $element, inputs, close) {
angular.extend($scope, inputs);
if ($scope.id == null) {
$scope.id = 'modal-default';
}
if ($scope.backdrop == null) {
$scope.backdrop = true;
}
$scope.display = true;
$timeout(function() {
return $element.removeClass('modal-animate-enter');
}, 300);
return $scope.close = function(result) {
$element.addClass('modal-animate-leave');
return $timeout(function() {
$scope.display = false;
return close(result);
}, 500);
};
}); |
#93 now holds context on this ongoing issue, please move conversations to that thread! |
Hi!
I do not find any way to make use of ngAnimate on modal open. The close method allow to specify a time in millisecond for this
Thanks
The text was updated successfully, but these errors were encountered: