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;}
Related
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">
Recently I was playing around with a custom modal and I was having difficulty with dismissing it.
Basically there is an anchor tag with an absolute position placed on a div with a relative position. Css hover styles were not applied to it when the mouse was clearly above the anchor also the click event was not being fired.
Examples:
Defective Dismiss Anchor
Working Dismiss Anchor
The difference between these two examples is in the css
In the defective case the following styles are present
.modalDialog
{
/* ... */
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target
{
opacity: 1;
pointer-events: auto;
}
In the working examples all of these styles have been removed, but everything else stays the same.
My original assumptions about z-index being the culprate proved to be untrue, also I am doubting that fixed and relative positions are to blame (unconfirmed), it looks like opacity is to blame.
I realize why the removed styles are not needed, but I don't understand why they were preventing the hover and click events from firing?
An explanation would be appreciated.
It's the pointer-events: none that causes the problem.
This property controls how elements respond to mouse events, in this case hover and click.
It looks like it's tried to be overridden on the :target selector, but this won't work in this case, because .modalDialog:target means 'when the url is #modalDialog'. But, that .modalDialog doesn't have an ID so it can't be a target anyway.
From CSS tricks:
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
This is a fiddle update with just the pointer-events CSS rules removed, and it works.
http://jsfiddle.net/zPgj8/11/
I just found out that using CSS for button is better than the old Javascript mouseover. So I thought I'll give a try.
When I put the new code for rollover on the logo. I noticed when you move your mouse on the logo. The logo show "spinning" animate instead of "swapping" the image. I was wondering why it do that?
You can try by look at the link: http://www.streetlightministries.ca/2013 - move your mouse on the logo - you can see what I am talking about.
I hope you will be able to help me out.
Thanks!
Your problem lies probably in this CSS definition, which you apply to all <a> elements.
transition: all 0.5s ease 0s;
Together with the fact, that you are using sprites as images, the change in the part of the sprite, which is shown, is animated with a transition.
To overcome this either specify more detailed, which transitions should be animated or cancel out the transition for your logo using something like this:
#logo {
transition: none;
}
You have a 0.5s transition for all anchors set in the css. A fix would be
#logo {
transition: none;
}
It's because of the "transition". In your CSS, remove the transition elements from your anchors. Or, alternatively, add "transition:none" to #logo.
Why use transition: none? Just remove it!
Example:
<div id="one">
(content)
</div>
<div id="two">
<ul>............</ul>
</div>
I want to create an effect that appears that #two is comming down from #one, I tried using transitions so when I :hover over #one so #two would appear to be coming down from #one but the content stayed there while only the background changed in size, I want the whole list to appear to be coming down from #one like in this website: http://merryweddings.com/
If you know the size of the div that will pop up, you can do a simple transition on the 'height' property, like this:
http://jsfiddle.net/BeDQr/
You also could use the transition on the 'max-height' property and set it to a very large value.
#two {
max-height: 0;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
max-height: 500px;
}
But in this case, the end of the animation might be a bit abrupt.
You might want to use JQuery for this instead of pure CSS.
Check out this example : http://labs.abeautifulsite.net/jquery-dropdown/
This link also shows a lot of possible JQuery solutions.
See this link here: How can I transition height: 0; to height: auto; using CSS?
Also see the link in the first answer of the above link which is here: Can you use CSS3 to transition from height:0 to the variable height of content?
This, unfortunately is the only solution you have for a pure CSS method. The second link shows a sort of workaround or a hack. The first gives some further details.
Suppose we have HTML:
<div id="wrapper">
I want this to change color when button hovered
<div class="button">Close</div>
</div>
We can change the element's style when the wrapper is hovered:
#wrapper:hover .button{
color:red
}
Now want the opposite thing:
button:hover #wrapper{
background:yellow
}
#dan; you can do this with css also like this:
#wrapper{position:relative;}
#wrapper:hover .button{
color:red;
}
.button:hover:after{
content:"";
background:yellow;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1
}
check this example http://jsfiddle.net/sandeep/b6apC/ .It's a fake but can achieve that effect with css.
While, as noted, this question cannot be answered with CSS, it can be achieved with JavaScript (and without need of a library, such as jquery, mootools etc):
var b = document.getElementsByClassName('button');
for (i = 0; i < b.length; i++) {
b[i].onmouseover = function() {
this.parentNode.style.backgroundColor = '#f90';
};
b[i].onmouseout = function() {
this.parentNode.style.backgroundColor = '#fff';
};
}
JS Fiddle demo.
Edited
You can also, with CSS3, apply fading to the backgroundColor changes:
div[id^=wrapper] {
/* other stuff */
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
}
JS Fiddle demo
If you don't mind an extra element for the text (which is most common anyway) then use the hackless and pure CSS1 solution from this answer which leads to this fiddle:
Markup:
<div id="wrapper">
<span>I want this to change color when button hovered</span>
<div class="button">Close</div>
</div>
Style sheet:
#wrapper {position: relative}
#wrapper:hover {background: yellow}
#wrapper span:hover {background: white}
#wrapper span {display: block; padding-bottom: 1em}
#wrapper .button {position: absolute; bottom: 0}
This cant be done via CSS im afraid, however via Jquery... Here is a solution! (Untested but theory is there)
<script type="text/javascript">
$(document).ready(function()
{
$(".button").hover(function()
{
$(this).closest("#wrapper").stop().animate({"color": "#fff"}, "medium");
},
function()
{
$(this).closest("#wrapper").stop().animate({"color": "#000"}, "fast");
}
);
});
</script>
Hope this helps you. The key is the "closest" bit, This searchs up the structure to find the first instance of "wrapper" and then does its jquery magic to it.
In general, CSS styles can only affect things further down the tree - so you cannot affect the wrapper (essentially ever).
However, you may be able to fake it: you probably don't care about whether the wrapping element changes color, but rather whether the visual circumscribing block changes color. This outer block does not necessarily need to be a wrapping element - indeed, there are several possible alternatives if you're willing to control the layout in more detail.
You could make the "wrapper" and "button" siblings, and then use #button:hover + #wrapper
You could have an invisible element the size of the button and include the wrapper and button within it - then declare the hover style on it.
If you only care about a background color, make the wrapper's background transparent. Then, when on button hover unhide or generate a large colored background box with a lower z-index. (You can position this new background box either handily using top, left etc. or, in case that's impossible due to other positioning, simply make it huge and with negative margins and hide overflow in the wrapper).
This last approach is particularly attractive since it doesn't require manually positioning the button. However, it's also more limited in that in doesn't really affect the surrounding box; so you can only change the background-color and not for instance the text color. I've implemented an example here: http://jsfiddle.net/emn13/xExvC/