I have an app with a bunch of tabs implemented using ngroute.
How would you make the tabs animate the tab switch for specific links and not animate for all other links. (all the links in question cause a route change)
I use Angular 1.2.x
More information (only if you didn't understand my question)
When I switch tabs using certain, specific, links I'd like the previous tab to animate out and the new one to animate in.
When I use another set of links, I expect the tabs to switch without navigation at all.
My problem - The "leaving" tab is not dependent on the current click event that caused the route change so I don't know how to enable or disable its behaviour based on the current click event.
You can add css class like:
.animated-render.ng-leave {
-webkit-transition: 0.5s;
transition: 0.5s;
opacity:1;
}
.animated-render.ng-leave.ng-leave-active {
opacity:0;
}
And then apply .animated-render class to specific element.
Related
I'm trying to use gatsby-plugin-transition-link in my gatsby site, in order to implement a page transition. I managed to install the packages fine, and implement AniLink correctly. the transition is almost working perfectly in my sandbox, but I'm getting a funny bug.
I'm trying to implement a cover page transition, whereby a coloured div slides across the page, covering it completely. Continuing to slide across the page until out of view, a new active page is revealed behind it.
The problem is: the initial page remains for a split second, even as the cover slides out of view. It overlaps the newly active page for a split second before vanishing. Why is this happening, and how can I make sure that the previously active page hides itself before the new active page displays?
here is a link to my sandbox: https://codesandbox.io/embed/m7z386ll6x
click on 'Go to page 2 transition link' on the index page, to see the bug in action. Once you click on the link, the blue cover slides across the page. As the cover slides out of view, still see all the text content from the index page overlapping the new content of page 2, for a split second.
I had a same issue today and just found good solution to it. Since there is two divs during transition I just simply added an animation to hide unmounting div when its covered by an image.
Note that animation time should be same as duration + add some extra-delay in animation to avoid blinks
.tl-wrapper--unmount {
/*
Just make sure animation time is same that transition duration in <AniLink />
as well add some delay (e.g. 0.2s as in example) to avoid weird blinking at the end
*/
animation: 1s ease-out 0.2s normal fadeout;
}
#keyframes fadeout {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}
Demo
I am also having this issue but only when using AniLink with direction="left" or direction="right" direction="down" did not show this issue.
I have a component within a react/mobx application, which observes a certain property of a provided ui store. Whenever this property changes some elements of the component will hide / show.
As far as I understand it, the ReactCSSTransitionGroup is for animating components upon mount / unmount. How do I animate an element (a div to be precise) within a component, which is hidden via display:none but will appear upon chaning the store properties?
Instead of display: none you should set opacity: 0 to hide and opacity: 1 to show. Then you can animate the transition using basic CSS transitions like
-webkit-transition: all 1s;
transition: all 1s;
Check out css animation property. It will animate the element when it is added to the DOM. So, don't hide the element with display:none, but simply don't render it. When props changes just render it with css animation defined ;)
It is supported by all browsers, IE from v10 (which is quite enough).
With md-tabs, is there a way to make content appear without sliding in when selecting a tab with Tabs?
None of the options seem to indicate a method.
If you want the content to just show up without the sliding you can set the css to stop the transition effect like this:
md-tab-content{
transition: none;
}
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}