I have ion-view template which is referenced from main menu of the app.
In second view i have attribute:
<ion-view title="Settings" animation="slide-in-up">
But page is loaded with default animation.
I tried to remove attribute animation from body tag, but without luck, animation is still same (i tried it in several browsers and android devices).
<body ng-app="starter" animation="slide-left-right-ios7">
Could somebody tell me how can i set animation by right way?
Thanks for any help.
I don't know if this is all of what you're looking for, but I was able to find $ionicAnimation documentation. It also sounds like the Ionic team has been doing some major work that effects transitions, which might be why the docs have been down.
Related
I am using animations from the animate.css library.
Everything looks good until I check the site on my iPhone. It works fine when I use the chrome developer tool device toolbar iPhone setting.
The background while the animation is going on gets distorted, it seems like it is zooming in really far.
I am using the fadeInDown and bounceInUp animations which I read might increase the document height?
Any suggestions or help is greatly appreciated!!
You can set Overflow: hidden to Parent container. So that it will not increase the height when animating.
Tested and verified ;)
Thanks
I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.
You can see a GIF here
Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages.
If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.
Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card.
Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.
What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page.
Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.
Anyone have any idea what this can be?
I checked with Chrome, Firefox and IE, seems to be the same everywhere.
Thanks very much for your help!
Kind regards,
Huebiii
Found two more sources on github with the same issue and solutions.
Apparently only slide left/right animation are affected. Using a different animation should help.
Set Element.prototype.animate = null before loading the polyfill.
Flicker after slide animation in neon-animated-pages in Chrome
web-animations-next-lite flicker #86
I'm making a WebKit-based text editor app for Mac, and I need to find a way to zoom the document in and out.
I've seen this StackOverflow article here, it suggests just scaling the view that Webkit is rendered into. The problem is, since Webkit doesn't know about it, this breaks things like drag & drop and causes Javascript to report the wrong cursor locations. Unfortunately, for some reason, the Cocoa WebKit API only supports scaling text up or down, not the whole page.
Safari and Chrome are both able to do this properly. I've gone as far as to look through the Chromium source code to figure out how it's done, but unfortunately it's using a completely different cross-platform API.
Any advice would be greatly appreciated. I'm not opposed to using private APIs, if I can figure out how to use them in a safe way.
-Keaton
The APIs for doing this aren't currently public, but they've been around for years and aren't likely to change. You can find them in WebKit's WebViewPrivate.h header. You won't find that header on your system, so you'll have to redeclare those methods yourself in a category. Something like:
#interface WebView (Zoom)
- (IBAction)zoomPageIn:(id)sender;
- (IBAction)zoomPageOut:(id)sender;
- (IBAction)resetPageZoom:(id)sender;
#end
Another option is just to set the CSS zoom property on the html element in your editor. You can do that in markup (<html style="zoom: 1.5">) or in JavaScript (document.documentElement.style.zoom = "1.5"). That doesn't require using any private APIs.
So, I'm working on a mac app, and I'm trying to add a shadow via core animation to a button. I used the effects pane in Interface Builder and set the shadow and color, and made sure to check the "Want's Core Animation Layer" checkbox. But when simulating the interface or building the app, there is no shadow. I would appreciate it if someone knows what's wrong.
Thanks!
Edit: I've tried several things, including cleaning the project and turning on and off core animation. Nothing fixes it.
I fixed it. I ended up going through every interface element in the tab view and turned off core animation on each one (I had some strange transparency stuff going on). Then I went back to add the shadow, and it worked fine.
I'm developing a web app for iOS devices, and want to have a header that stays on the top, and then two scrollable content areas underneath it, kind of like Gmail's iPad interface and the iPad split-view apps. Does anyone know how? I've looked at http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/, which has a good solution to the fixed positioning, but only allows one scrollable content area. Does anyone know how to do this? Thanks in advance!
Never mind, just found Sencha Touch, which lets me do this and much, much more!
Use div scrolling. See Glovebox for example. Try this demo on the iPad.