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.
Related
I use Jquery-UI and accordingly the selectmenu-widget in my project. Can I disable the widget for a specific element, so that the select look and functionality returns to native?
I tried solutions mentioned in Jquery disable theming for a specific element but without success. data-role: none is not doing any change, and I can't simply remove ui-classes because the widget creates a whole new element which acts like a proxy for the select and so the select itself does not have any classes.
Any help would be appreciated.
I solved it by manually destroying the selectmenu-element and displaying the initial element again at documentReady().
I would be glad to hear about a better solution since this one is hacky and involves problems, e.g. at responsiveness if the element should be displayed just at a specific screen size, you have to handle it again manually in your function where you render the initial element back.
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.
So I have table and menus, which I want to place near selected element.
For example, table slides down from one line and there is transition, so I can't instantly take relative offset and set it to menu. I should do it after transition is complete.
So, talking in abstract way, I should emit event about selection of element when table is fully displayed. Or I should display all table and then select element, so menu will know where to go.
The problem is: I dunno how to subscribe on transition end.
Yea, I can recalculate position of menu in $watch, but I don't feel like I need a new watcher here.
How it could be implemented on ReactJS, for example? I use angularjs, but the point is - I don't need to use two-way-binding here.
Any thoughts?
Btw: I can't rely on angular-animate since it requires classes to be used, but I have to play with css dynamic attributes instead. And no, it is not possible to rewrite it to use classes, yes I tried. It will not work by the possibilities of css.
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.
Good day!
I have a page with a vertical menu off to the left and a box to the right of it. Currently I am able to drag a ghost of a menu item and let go of it. It doesn't actually drop anything, so there is no actual change to the menu. When I drop the ghost, it calls a method.
What I'd like to be able to do is to create an object with JQuery or plain javascript or whatever and instantiate it.
This object would have the following properties:
- Have its parent be the div box that its dropped on.
- Be contained by its parent, yet draggable within it.
- Have the ability to be a parent of another object of the same type when its dragged into it from the menu
- Have a title based on the menu item that it was dragged from
- Store whatever text values are assigned to it.
I'm not asking anyone to do this (although you can if you want), but I would love to know if its possible and if anyone can provide a link to some sample of an object or widget being built that can be assigned properties and events.
Thanks so much,
Carlos
http://jqueryui.com/sortable/
This is really by far your best option. I have seen others, but this does exactly what your are describing. Most of the time sortable does everything you want, but if it gets really complicated, say you want to have the item your currently on light up or not be easily contained in an option you can still use draggable and droppable to do w/e you want.
I found something that will work for me. Instead of reinventing the wheel, I will just modify the Jquery-UI's dialog widget. its alomst exactly what I need out of the box. There's an interesting article on it here: http://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/
Thanks much for the help, all.