dfsq / ngview-animation-effects Goto Github PK
View Code? Open in Web Editor NEWDemonstration of different animation effects with AngularJS ngView directive.
Demonstration of different animation effects with AngularJS ngView directive.
Hi,
I am looking for same pop-out effect on angular material sheet. I want to use 'pop-out' effect to hide some content and show next content.
That is exactly you are doing on ng-view. But in my case while click on 'Next' the another md-card (material sheet) will be change,
Does it possible using this library ?
I was looking for view animations but only found terrible examples for beginners.
Yours was the best and most straight forward example.
Looking forward to giving the same back to open source community.
Kudos (Y).
Hi, i forked your repo and more than issue is a request or guidance
First thanks for this mini-project.
Second, i need to use it to navigate back and forth between views, i managed to modify the pagesController in order to move with a prev and next buttons and left only the slide effect, however i cannot make it slide the other way like you do when pressing the back button on browser, how can i do it?
Thanks in advance!
Edit
I solved it by adding a new class in css that switches left from negative to positive and also for leave.
Then when the corresponding event is clicked i add or remove the class.
Very useful repo, thanks! Do you know how to reverse the slide transition in the other direction, like for a back button?
Hello,
how about using pushstate instead of hashes?
Cheers
Marc
First of all, really nice job with this demo. This is exactly what I am looking to accomplish (smooth transitions between angular views).
Using the newest version of angular though, as you likely know, they have dropped core router support. As a result, I am using the ui-router module for my "states".
After dropping in the css rules as outlined in your demo, things did animate, but were very jerky and odd (newest version of Chrome). I'm wondering if this has something to do with some differences using ui-router. Would you happen to know?
Thanks!
Great project, i love it. Really helped me to add nganimate to my site. Im just wondering though why does adding .slide cause my html to be wider then the window.
Sir
Plugin work well on our website. But now we need to use ui -router. Is there any support for ui-router
Instead of using css left and top to animate, using css-transforms results in much improved performance.
Greetings!
This is great stuff! Just what I needed to learn to put together a portfolio for my site. For some reason the index.html inside of the App folder is operating correctly. I am still learning this stuff, do you know why that is not work?
you other index is just the link back to your github branch which shows the angular app working appropriately.
HI I have 2 partials and one Ng view.
Partial 1-header
Ng-view-class slide animation
Partial 2..footer
When I use the slide animation...it makes the partial view...the header move up and stay there.
How do I stop this from happening?
thanks,
Great Work, I liked animation style mobile, right to left and go back left to right
You made this in example page, pressing "view source" button, and pressing "Back" button
All we have to do, is include (view source page)
in html
div class="" back-animation="" ...
in CSS
.reverse .page.slide.ng-enter {, etc
in JS
directive backAnimation
function backToPages in controller
Tnks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.