I would like to try to create a popup using ons.screen.presentPage() with a transparent background, however once the transition is complete there is a black mask that appears behind the page. Could you please indicate the purpose of this black mask or the best way to create a popup dialog / selector?
The black mask is used to achieve the fade out effect of the exiting page.
What you can do, is to use DOM api to hide it.
ex.
// the controller of the entering page
function Page2Controller($scope){
setTimeout(function(){
$('.onsen_screen-black-mask').hide();
}, 0);
}
Related
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
In Sencha, I'm able to mask a background component and bring up a dialog component nicely by calling this.view.mask() on the background component.
Then when I press "Submit" on the top dialog, I want to have a mask cover the dialog and background component all together instead of just masking the smaller dialog box. I don't want to just mask the dialog box, because even though the background is masked too, the dialog box's border is still obviously bright.
How can I mask both components all together?
On the dialog box I tried this.view.mask("Loading..."), but only the small dialog box is masked. Its border is still clearly bright so it's clear we're just putting a mask on the small dialog box rather than on the whole page.
I tried querying the background component via view=Ext.ComponentQuery.query('MyComponent')[0] and then using view.mask("Loading"), but this only adds the mask to that background component.
This is an ugly solution, but it worked for me. Tested on 7.0.0
var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
wndSize = wnd.getSize(),
myMask;
myMask = new Ext.LoadMask({
msg : 'Please wait...',
target : wnd,
height: wndSize.height,
width: wndSize.width
});
myMask.show().setXY(wnd.getXY());
When I open the item-accordion I have used the animation .But the item-accordion has the image that is wrap in the multiple row using display flex property of the CSS3. Whenever I open the accordion the extra content is displayed on the right during transition.So can anyone suggest what can be done to solve it?And this happens when width of the content is small
Another problem is i have used the animate-repeat animation to delete the item.But when i open the item-accordion the animation is applied to them also hence animating the image as a list.
.list .item-accordion {
-webkit-transition:0.09s all linear ;
transition: 0.09s all linear;
}
This is the animation I am using.
The demo of the code is over here:
http://plnkr.co/edit/FnQVCYrSGOlpk5wNxAZ6?p=preview
I have had similar issues when having to meet complex animation requirements. I have used greensock for more complex animations but that doesn't seem to be needed here. The general concept is that you are going to want to animate something but change/alter the properties before and after the animation has completed. You are going to have to be using a few callback promises to run additional animation after the first part of the animation has completed or do some manual calculations and adjust properties before starting or ending.
Angular Animate
Ionic Animate
It seems like ionic is allowing for onStart and onEnd callbacks. I would hide or force certain properties onStart and reset them onEnd so that you can get around what you are trying to work with. If you are not wanting to work with a fixed width or height you are going to have to grab window/screen size and so some basic calculations based on that. So you would get your window size set the size based on the window for the animation then reset back to auto when completed.
I am using ng-pageslide directive to implement the page slide.I have tried lots of ways to mask the parent page so that it will get look of pop up but feel of sliding.
is there any possible way to mask the parent window so that nothing is clickable from the parent page unless until the slide is closed.
please help me out..
Not without modifying ng-pageslide.
What you could do is append another div to the body(https://github.com/dpiccone/ng-pageslide/blob/master/src/angular-pageslide-directive.js#L81) that would be transparent and absolutely positioned, but with zindex sligtly lower than the slide have, which is 1000.
I'm trying to animate a button so that if it is clicked, a picture will appear, but when it is clicked again, the picture will disappear- I want this to continue to happen indefinitely- I feel like this can easily be written with a macro, but I want to avoid unnecessary over-complicating of things. I tried to add in click animations but it will only appear and then disappear
Instead of using animations, you can toggle the transparency of the image between 0 (totally transparent) and 1 (totally solid) when click happens to achieve disappearing and appearing.