I'm new to angular and been following the basic tutorials from their official site but I haven't see any tutorial about animating specifically view transition animations. What I want for example is for my current view to pan to the right to show the next view and hitting the back button pans to the left to reveal the previous view.
Does angular.js supports this out of the box? If it does, what is the proper or recommended way of doing it? Thanks a lot.
Angular 1.1.4, released just last night (4/3/2013) supports CSS animation. Though the documentation and examples are still a little scarce, you'll find a good introduction in this video presentation.
Angular doesn't provide animations (or much DOM manipulation at all, really) - those would have to be provided by a 3rd party (probably JQuery).
Since you're new to Angular I'd try to write the animations in a non-angular app, get them working, and then read up on Directives to integrate your work into your Angular app.
Full Tutorials here: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
Things has changed a little bit since 1.1.4
Related
I need to animate a tooltip that uses Angular Overlay CDK, based on it's position.
withTransformOriginOn sounds like it could do the trick based on the Angular Overlay CDK documentation :
Angular withTransformOriginOn only documentation
I do not understand how to use it, as Angular provides no example or description for the usage, and I can't find any example online...
Has anyone used it before and could point me to some direction, or explain to me how it is supposed to work ?
Thank you
I’m having the hardest time figuring out how to go about a page transition where one element leaves one view and enters the next like the animation of the book thumbnail or surfboard from the linked images below.
I mostly work in Vue, but if anyone has insight on how this is done on the development side of things I’d be very appreciative!
Booking animation design
https://dribbble.com/shots/3878921-Booking-animation-design
Surf Project
https://dribbble.com/shots/3879463-Surf-Project
Please Check this sections of Vue documentation.
Overview
https://v2.vuejs.org/v2/guide/transitions.html#Overview
Enter/Leave from a list
https://v2.vuejs.org/v2/guide/transitions.html#List-Entering-Leaving-Transitions
You might want to look into Overdrive
or then use Velocity with Vue JS hooks
Can we drag and drop md-list item or md-cards in angular material design using jQuery or other framework?
I can give a partial answer to this. It is not recommended to add jQuery to an Angular project. Angular is controller-centric while jQuery is focused on manipulating the DOM. They are really different approaches, and while you could possibly get something to work using jQuery and Angular together--it would tend to be a fragile and overly complex solution.
The same holds for Angular Material. It's not a great basis for jQuery operations.
That having been said, see also my comment on your question. I read through all the documentation on http://material.angularjs.org and found nothing that suggests built-in support for drag/drop operations in general nor for dragging cards around in a list.
I realize the framework is still pretty new but I am surprised to find that something as essential to the Material Design concept as dragging cards around a list simply wasn't addressed. So perhaps you and I both are confused or missing something that should be glaringly obvious.
I've seen http://codef0rmer.github.io/angular-dragdrop/#/list, but this requires jQuery and jQuery UI. If possible, I'd like to not have those dependencies.
The AngularJS documentation SURPRISINGLY has an example of this on the Compiler page. Check it out. You may have to add to it, but it is a great simple example of how to write a directive to get the draggable functionality.
Yes, ngDraggable is designed to support drag-drop functionality without dependency of jQuery UI.
I did some spike and it worked well on PC browsers, however, it still has some UI issues on mobile so far. Here is a live demo.
My requirement is a build a web form designer in a browser - just like how Zoho Creator (or something similar to other browser based designer tools like proto.io, protoshare, gomockingbird, lucidcharts etc).
Have a tool box/palate on one side, a canvas and a properties box that always shows the properties of the selected control.
I definitely don't think that using JQuery and working with DOM elements will give a scalable solution like these (proto.io, lucidchart etc.). After numerous trials, I feel that AngularJS is the way to go, but it does not have native support for drag-drop and hence I want inputs from community members like you may have more experience with AngularJS on whether what I am setting out to do, is Angularjs the right framework to use for this kind of a solution?
See screens shots of tools like Proto.io - something very similar to what I am setting out to build. Just that my palate will contain form controls like textbox, label etc which I will drag and drop on the canvas instead of the shapes that proto.io has.
Angular is fine. But the main idea of these kind of frameworks like Angular, Dojo, backbone is to structure your application with a specific designed pattern.Hence getting benefit from that pattern. And Angular will help you construct your app into MV* pattern. i may think what you need now is a graph library that support things with canvas , drag-drop , palettes, templates, overview, etc. Some may be useful are JointJS, MxGraph,Draw2D, Data-driven Documents, gojs, mindfusion.
Draw2D supports Angular as well. The lib has a boilerplate app whichs shows
how to use the draw2d stuff in combination with angluar.
The examples shows how to structure your app with Controller, Factories and two way
data binding.
I think you can use the draw2d boilderplate with any other DragDrop lib. It's just
a pattern how to integrate a third party lib into angular.
Angular has many hooks and pattern which supports any kind of lib
Greetings
Andreas