Hi,
I am using a modal on my app and it works excellent. but instead of slide-in-up animation it is showing Fadein. I set the animation as below
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal; }, {
scope : $scope,
animation: 'slide-in-up'
});
})
but this doesn’t seem to work. Can anyone help ?
Have you see this example? http://codepen.io/ionic/pen/gblny
The slide-in-up definitely works with that code base. What Ionic version are you using? Can you setup a sample - it’s pretty easy to fork the one I just listed.
Your code $scope.modal = $ionicModal; has me wondering.
You really just need this:
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up',
focusFirstInput: true
});
Hi,
I setup the my stuff on code pen and surprisingly it starts working. http://codepen.io/aghausman/pen/bsEwv
It is still not working on my local code base. I m trying different things out with no luck so far. Let me show you what I have in my code.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/mod-danube.css">
<script src="js/ionic.bundle.min.js"></script>
<!-- Needed for Cordova/PhoneGap -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-pane ion-side-menu-content>
<ion-header-bar type="bar-danube" title="" right-buttons="actionRightButtons" left-buttons="actionLeftButtons">
</ion-header-bar>
<ion-content has-header="true">
</ion-content>
<!-- Login Popup -->
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-danube-half">
<h1 class="title">Login</h1>
<button class="button button-clear" ng-click="modal.hide()"><i class="ion-ios7-close-outline"></i></button>
</header>
<ion-content has-header="true">
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">User Name</span>
<input ng-model="newUser.UserName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input ng-model="newUser.Password" type="password">
</label>
<button class="button button-full button-positive" ng-click="createContact()">Create</button>
</div>
</div>
</script>
</ion-pane>
<!-- Left menu -->
<ion-side-menu side="left">
<header class="bar bar-header bar-side">
<h1 class="title">Projects</h1>
</header>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
mod-danube.css
@import url("ionic.min.css");
.bar.bar-danube-half {
background-color: #F0F0F0;
background-image:url(../img/header-img.png);
background-size:contain;
background-position:0% 50%;
background-repeat:no-repeat;
border-bottom:1px solid #009760;
color: #fff;
}
.bar.bar-danube {
background-color: #F0F0F0;
background-image:url(../img/header-bg.png);
background-size:contain;
background-position:50% 50%;
background-repeat:no-repeat;
border-bottom:1px solid #009760;
color: #fff;
}
.bar.bar-side
{
background-color:#333;
opatcity:0.5;
}
.debug
{
border:2px solid red;
}
.logoimg
{
overflow:hidden;
width:120px;
margin-top:-10px;
}
.col-offset-38 {
margin-left: 38.3333%;
}
.bar.bar-danube-half button, .bar.bar-danube button
{
font-size:32px !important;
color:#F15A29;
}
.bar.bar-danube-half h1
{
color:#F15A29;
}
app.js
angular.module('todo', ['ionic'])
.factory('UserService', [function()
{
var uInfo = {
isLogged : false,
userName : ""
};
return uInfo;
}
])
.controller('TodoCtrl', function($scope, $ionicModal, UserService) {
$scope.$on('$destroy', function()
{
$scope.modal.remove();
});
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
$scope.actionRightButtons = [
{
type: 'button-icon ion-compose',
tap: function(e) {
$scope.modal.show();
}
}
];
$scope.actionLeftButtons = [
{
type: 'button-icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}
];
$ionicModal.fromTemplateUrl('modal.html', function(modal) {
$scope.modal = modal;
}, {
scope : $scope,
animation: 'slide-in-up'
});
})
.controller('ModalCtrl', function($scope, UserService) {
$scope.newUser = {};
$scope.createContact = function() {
UserService.userName = $scope.newUser.UserName;
$scope.modal.hide();
};
});
I am still new to this great library and couldn’t figure out. whats wrong with my local code.
I basically took your exact code above and put in a CodePen : http://codepen.io/calendee/pen/hsqpc I made a few changes to deal with Ionics CDN sourced code.
The modal works perfectly in it as well as your sample. So, I can’t imagine what is going on. Where are you not seeing the slide-in-up? What device? What version? What browser?
If in Chrome or another desktop browser, have you checked the Network section to see list of files and ensure that all CSS files are loading properly?
One thing I noted in your sample index.html code above is no link to the Ionic CSS file. It seems you are using import in your own CSS file. Can you try use including the Ionic CSS link in the index.html file instead of using @import? Just something to test.
Ok let me do that, I will post you the results. Thanks Calendee.
Well, after much consideration, hit and try different thing I found out that it is working absolutely fine on my desktop. The animation is not working when deployed to my mobile Android 4.2.
I tried to use the ionic.min.css with no luck. so whats difference between mobile / desktop ?
Hardware-accelerated animations are kinda hit or miss on Android - I’ve noticed that sometimes there’s a delay in animating and it appears that the web view is trying to first create each keyframe in the animation, and then they all run at once. Sometimes you can fix that by not using translate3d, but of course if you’re using a built-in Ionic animation that’s not really an option for you without overriding the default CSS.
Ok here is the update. I was using ionic-v0.9.26 and it was not working with my Android 4.2 but while fixing the issue listed here : Listview arrow icons missing
.
I Updated my library base to nightly build v0.10.0-alpha-1052 and it start working. Now I can see slide-in-up animation on my android.
Issue closed. Thank you guys
I ran into something like this and the cause was that my modal template wasn’t wrapped with a class of .modal, which causes self.modalEl to be null in $ionicModal.show() and then the animation isn’t applied. Adding a .modal div around my whole modal contents fixed it.
Thanks @cs_michael for that tip, sorted out the issue for me!
Thanks @cs_michael! This worked.
cheers @cs_michael. Did the trick.