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).
Related
The new Stepper component is awesome, except that the height of each step won't adjust properly when its child components change from hidden to visible, or vice versa via CSS. Specifically, if a component's style changes from display: 'none' to display: 'inline', the height of content will remain the same. As a result, the newly visible component won't show properly.
However, if the component is dynamically created (as opposed to be made visible with CSS), the height would adjust properly. Unfortunately in my case, I do need the component to be there even when they're not visible.
Has anyone encountered similar problem? I'm using react.js v0.14 and material-ui v0.15.0-beta.1.
I've seen a lot of post talking about display vs visibility vs opacity but in my case I need something more along the lines of display none but I don't want the cost associated with having the browser completely rerender what in this case is a footer React component. Thus I wanted to know if there is a performance benefit of setting the height to 0px instead of setting the display to none. The component will always be rendered on the page as well.
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.
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.
As you can see from this jsfiddle:
http://jsfiddle.net/robcampo/pWGuS/
I'm trying to fade out an element and fade another in using Angular animations.
The fading (using opacity and transitions) works. However, as you'll see, it displays the previously hidden element before hiding the current element on display. That leaves you with both elements on display at once.
Question
Is there a way to wait until the first element has been completely hidden before showing the second element? Pretty sure I can do this with a custom directive but before going down that route I'd like to be sure there's no out-of-box way.
What I've tried
a) Put a transition-delay on the element being faded in:
.ng-hide-remove {
-webkit-transition: all 1s ease 1s;
transition: all 1s ease 1s;
opacity: 0;
}
b) Use a height property
This won't work for me because the divs that I'm hiding in my app are part of a grid system.
Note
If I was to implement this in jQuery, it'd be:
elementToFadeOut.fadeOut(1000, function() {
elementToFadeIn.fadeIn(1000);
});
Fixed:
http://jsfiddle.net/robcampo/pWGuS/10/
Used part of Zub's suggestion but also set the height of the container div dynamically so that it doesn't flicker when transitioning.
To achieve this, a directive was created and added to each of the corresponding fading elements (those with ng-show). This directive compares its element's height with that of the parent. If the parent has a lower height, it updates the parent (this prevents flickering):
if (height > parentHeight) {
$(element).parent().height(height);
}
To ensure not all ng-show/hides fade in/out, a the directive animateFade doubles as a CSS class that is applied to the fading animations:
.animate-fade.ng-hide-add {
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
}