I am using Angular Material and I am using tabs in an md-dialog. When navigating through the tabs the dialog height is scaling really smooth according to the content of the tab. However, when using an ng-if to show or hide content, the dialog height changes but there is no smooth animation. Is there a way to animate the change in height when showing and hiding elements inside dialog?
This is a codepen of the tabs with a checkbox for adding content:
http://codepen.io/csteur/pen/zvjgRr?editors=101
You'll need to use animation yourself to show and hide the new content. It doesn't look like ngIf works well with material dialogs, but ngShow works fine:
http://codepen.io/anon/pen/zvaYEy
I added CSS and modified your HTML. It seems that ngAnimate behaves a little different in material dialogs, so I had to add the transition on the main class and 2 extra classes that you don't normally use to the HTML:
CSS Addition:
.animate-show {
height: 0;
background: white;
overflow: hidden;
transition: all 0.5s;
}
.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
transition: all 0.5s;
}
.animate-show:not(.ng-hide) {
height: 60px;
}
HTML Change:
<p ng-show="addText" class="animate-show ng-hide ng-hide-animate">
Related
I have a page consisting of a component Main.
Main further contains two components - NavBar and Body. Body also contains two components - ViewTable and AddPerson. Inside the ViewTable component, I want a modal to load when a field in the table is clicked. I've got the functionality right but I'm stuck at the CSS part.
Right now, the modal looks like this -
How should I go about doing so? I'm new to React and the component structure
There's a good react library called react-modal i can recommend. It's a bit hard to get into but once you get it to work it's great.
If you want to do it the vanilla way, use position: absolute for the modal. To get the transition to work, use react-transition-group to toggle the opacity and animate the transition. It'll probably take some time to get into react-transition-group since it's a bit confusing at first glance.
As suggested by #gian.gyger, react-modal with react-transition-group is the right way to go.
But, if you have already implemented the modal with plain react and want help with CSS alone, this could help. To make the modal position fixed so that it doesn't occupy space in the lower layer, we could give the following
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.4); /* for darker background when modal is open*/
/*z-index sets the modal on the higher stack above all of the others */
z-index:10
}
.modal {
width: 50%; /* or above or lesser */
background: red; /* modal background color */
margin: 20% auto;
}
Here, I am assuming that element with modal-container class is activated only upon the desired action (like, a button click) and modal-container is an empty div that just contains within it the modal element
Reference: W3Schools
I'm using this a link accordion menu to create a FAQ. Problem is that height is fixed, so whenever text is too long (or on mobile devices), text is cut us.
I've tried to use height: auto, overflow: hidden; min-height, !important and all the tags to make the height responsive, but whenever I do this, If I click on the tabs, the scrolling accordion effect doesn't work or it jumps to top page.
How can I solve this? I'd prefer not using JS or Jquery...thanks!
Here's the css
.ac-container input:checked ~ article.ac-small {
height: 140px;
}
All you need to do is Setting height:auto for the below property.
.ac-container input:checked ~ article.ac-small {
height: auto;
}
which is the one deciding height of the according body.
Plese find the link for the updated code.
The solution you use is CSS only.
A CSS3 animation needs a defined height value to generate the transition – that's why the solution you used offers 3 different predefined heights.
Another approach would be to use the max-height-trick which works for linear animations only though.
The most common solution would be to toggle the animation via jQuery's slidetoggle().
I know this probably cannot be done without javascript but I dont mind using it.
I have a div that grabs the width percentage with PHP.
All I need to do is that on page load I would like the bar ( Div ) to start at 0px width and transition to the correct width percentage.
I can do it fine of course on a Hover or Active state but cant seem to get it right with page load.
Do you use jQuery? Theres a built-in document ready function. Inside of that, add a class to the div. Then in your CSS you can style the two different states of the div to accommodate the transition
Javascipt
$(function(){
$('.bar').addClass('.ready');
});
CSS
.bar {
width: 0;
transition: width 500ms;
}
.bar.ready {
width: 100%;
}
I am trying to make a toggle sidebar which animates.
When I try to hide the sidebar with CSS3 Transition property by adding a hidebar class, it works perfectly. But It's a toggle, and when I show it again, there is no transition. The menu just snaps out.
#page-content.hidebar {
transition: margin 0.3s ease;
margin-left: 0;
}
Can anyone suggest how can I have the transition property when I toggle the sidebar to visibility as well?
I am attaching a fiddle as an example.
http://jsfiddle.net/dxYCm/1/
You needed to do several things:
since all rules have been applied using id selectors in css, your class selector had no effect, as in css specificity it had low points to override previous rules specified under id. So you need to add !important. http://htmldog.com/guides/css/intermediate/specificity/ Learn more there...
You needed to put white-space:nowrap; as text/content of first div would curl up as div would get small.
Check it Out>>>
http://jsfiddle.net/techsin/dxYCm/5/
You don't need a hide class at all, jQuery has awesome built in features that do the same thing like .toggle() and .slideToggle!
Here's an example of .toggle
$("a#menu-trigger").click(function () {
$("#page-sidebar").toggle("fast");
$("#page-content").toggleClass("hidebar");
});
Also, you want to apply the transition to #page-content, not #page-content.hidebar so it transitions both expanding and contracting
If you do still want to do it with using a .hide class not changing the jQuery or the HTML, you can do it this way, by toggling the width and height
Relevant CSS for that:
.hide {height:0px; width:0px; color:transparent;}
#page-sidebar {width: 230px; float:left; transition: all 0.3s ease;}
I have created a transition effect for a menu on a web site. When I hover over the element it doesn't show the content that I want to see. Instead of that, scroll bar appears. This means the transition effect is working on this menu but the page doesn't go up to show the menu content.
My menu is at the bottom of the page. Please see My code below. Thanks
.change_height {
overflow:hidden;
height: 20px;
transition: height 3s;
}
.change_height:hover
{ height: 198px; }
CSS alone, even with animations will not cause the browser to automatically scroll. You'll need to use JavaScript that's triggered on hover.
From a usability point of view I wonder why you'd want the menu to appear in that position? If the element that triggers it is always at the bottom of the page why not have it animate upwards?