I am new to NativeScript and Javascript development in general. My background is Android.
Background:
As a test I try to replicate one of my old apps with NativeScript and have encountered a problem:
I use a RadListView with multiple templates. The correct template is chosen at runtime. The templateSelector uses a boolean variable to determine the correct one. (Imagine tapping a ListView item. When you do it expands and shows 2 buttons. You tap it again -> the buttons disappear.)
Now that works just fine.
Problem
My problem is that I cannot figure out how to animate the template switch. The new content just appears/disappear instantanously.
What I managed so far
I managed to animate the buttons when their template has just been chosen. I set their opacity to 0 and animated it to 1. Problem is: The necessery height for the buttons is reserved as soon as the template is chosen.
Question
Is this at all possible? If so how?
Sources
Expandable ListView items by manojdcoder:
https://discourse.nativescript.org/t/expand-element-radlistview/4268/3
There are few built-in animations you could find in the docs and working examples in Github.
Related
I am traying to create a big button that overflow an IconTabBar in SAPUI5.
I am working with IconTabBar, but I would like to use the empty space at the right of the IconTabFilter elements. Because I can not add additional buttons to the IconTabFilter, I want to add a button below the IconTabFilter and the using
css:
transform: sale(2.0);
transform-origin: 20% 40%;
and position the button over the empty space of the IconTabBar .
But as soon the element go outs of the container the next container hides the bottom.
I tried using overflow: visible, but still not working.
Does anyone know how can I make a big button that overflows another container?
A solution I can discourage you from using (in its current form): define and implement an IconTabButton control. The basic idea is to trick the IconTabBar into accepting another type of control in items aggregation. However the IconTabBar only accepts controls that implement the interface sap.m.IconTab and its corresponding functions. The problem is, they are a lot.
We did develop a prototype by using the source code on github, but gave up due to this needing a lot of work and maintenance (or at least more than we were willing to give). One specific unresolved problem by this IconTabButton control is, when the tabs in the IconTabBar overflow, they use another rendering method that the custom control does not implement. So it may look good but only until it overflows. Source code.
I am sharing this only for it to serve as an idea and eventual basis for proper implementation, I believe it is common use case to want some kind of a button inside the sap.m.IconTabBar. The control renderer must be migrated to V2, all the methods have to be properly adjusted.
Hi using Angular material and have list that is populated with list elements. On click of a button, I am adding one more element to the list at the beginning of it. I want to show a transition/animation while it is added to the list, so that it is clearly visible to the user that there a new list-item that is added.
I was not able to find out if there is something that Angular Material provides to make this happen. I have been through the documentation and demos provided on their website. How do I show the animation? Please help.
Angular-material requires ngAnimate which you can use to do what you want. If you have a md-list you probably bind your model with ngRepeat which supports enter, leave and move animations: ngRepeat#animations. You can use this to animate new elements being added to your model.
If this doesn't help you then you need to provide a code sample with plunkr/codepen or the like.
I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!
In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.
I am new to AngularJS and I've learned quite a bit in the last few weeks, however I have several questions. So currently I have a jQuery prototype that I would like to convert to use AngularJS. For any animations or page transitions I am using css transitions. To change pages, I am changing the body class with jQuery which in turn animates elements on or off the page.
In AngularJS, views are displayed and removed with no animation at all. The way I need it, some views would use some elements from the last view.
For example, there is a start view and a search view that contains a search input field that animates. When the page is loaded, the start view is loaded. When the user clicks submit, it would then load the search view but the search bar should stay there and animate to the top for future searches.
I am somewhat confused as to how to go about doing this. Any suggestions?
When possible use the unstable / development versions of angular.js. (There are pretty stable).
The newest have an ng-animate directive which is usable for the most use cases.
Also there is nganimate.org with a lot of examples and there this article and this one which should get you started.
I would like to create a "FlipView" of ListViews in Windows8 using JS and HTML. That is, I would like a control that would display a ListView and when the user swips or scrolls, it would display the contents of a different ListView. Is this possible? If so, how? Thanks for helping a Windows8 noob!
My attempt to put a listview under flipview, was not successful. css classes used by both controls overlap (e.g. win-item). I found that items in the nested list view occupied the whole available space like flip view item. This behavior was happening because the win-container hosting the nested list view item, was sized like that. I could not set its (win-container) size explicitly to smaller size even after overriding it in css file.
It does not look like that list view will work nested under a flip view for css/html. If any one else has had success with this, do share your comments and code.
if anyone had tried it in c# using FlipView and nested GridView/ListView and had success, do mark a answer with code (will be interesting to know).