I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.
Related
I am using Angular to hide/show items of a unordered list. Since the effect is a bit too fast for the user to notice the disappearance/appearance of my lis, I want to add a transition on the height.
li {
transition: height 1s linear;
overflow: hidden;
}
li.ng-hide {
height: 0;
}
This is where my problem is : the transition does not affect the lis, unless I set them a height, which I don't want, since I don't exactly know how big they are.
Here is a plunker to illustrate that. I've made the test on lis and divs and I've also tried without Angular which does not seem to be the responsible.
How can I make the transition work without setting the height of my elements ?
Just do it by animate max-height instead of height like in this DEMO PLNKR. In that way you are able to have a dynamic height of your element between 0 and your max-height property. There is no need for jQuery. You should avoid using jQuery or direct DOM-Injections in AngularJS applications.
li,
div {
transition: all 1s linear;
-webkit-transition: all 1s linear;
border: 1px solid;
overflow: hidden;
}
.work {
border-color: green;
max-height: 500px;
}
.no-work {
border-color: red;
max-height: 500px;
}
li.ng-hide,
div.ng-hide {
max-height: 0;
}
I have come across the same problem myself in the past and discovered as you have that the height must be set, this is in order for the transition to calculate what needs to happen. Two ways I have managed to get round the problem:
CSS way:
li {
transition: max-height 1s linear;
overflow: hidden;
max-height: 500px; // Any value above what you expect to be the biggest
}
li.ng-hide {
max-height: 0;
}
The above method has a two drawbacks in that, one you'll need to know an upper limit and two there will be a slight jump in animation. A better way might be to calculate the height with javascript:
** UPDATE FROM JQUERY **
var listItems = document.getElementsByTagName("li")
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.height = listItems[i].clientHeight + 'px';
}
Then you'd need the css:
li.ng-hide {
height: 0 !important;
}
To override the style attribute. Here is a pen of this example with a little bit extra in to illustrate the solution.
You don't necessarily need to set your transition on height.
You can set it on the ng-hide or ng-show property.
Here is your example with this feature :
https://plnkr.co/edit/pD4sQNGqpqrINJlZwE3q?p=preview
Simply assign the class to the element you want to animate.
.animate.ng-hide-add,
.animate.ng-hide-remove {
transition: all linear 2s;
}
You'll find more infos here : https://docs.angularjs.org/api/ng/directive/ngShow
nb: You can seperate the animation for ng-hide-add and ng-hide-remove in your css. of course.
Hope it helps !
I have read a couple of tutorials online, but I can't seem to get a cross-browser working example together.
HTML:
<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>
CSS:
/* ANIMATIONS */
.drop-down {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-ms-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
line-height: 100%;
}
.drop-down.ng-enter,
.drop-down.ng-leave-active {
opacity: 0;
max-height: 0px;
}
.drop-down.ng-enter-active,
.drop-down.ng-leave {
opacity: 1;
max-height: 100%;
}
What I would like to accomplish is that when the template is loaded with ng-include, it fades in from 0 to 100 opacity, and that it simultaneously opens like a dropdown (starting from 0, to full height that it needs). And vice versa when the form gets hidden.
The opacity already works, but changing the height does not, the div instantly appears with full height. Can some help me build the CSS with a cross-browser solution?
you have to define max-height in px in .drop-down class to make it work.
you can put any high value to max-height in px as you are anyways not defining the height.
also define overflow: hidden in .drop-down so that content is hidden on transition of height.
worked for me.
example demo here :- http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;
i am wondering if it is possible to set the height of a div with css animation.
I have a div that when you hover over it opens up but i want it to stay that height not shrink back to the original height.
Is this possible?
it needs to be done in pure css not javascript as its a website for college
You can do something like this:-
HTML:
<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>
CSS:
.divAnimate {
border: 1px solid;
}
.divAnimate:hover {
height: 200px;
}
.setHeight {
height: 200px;
border: 1px solid;
}
Refer LIVE DEMO
You should use jQuery. CSS3 is not supported in all browsers. However, it is possible to use CSS3 to achieve this.
CSS:
#myDiv {
height:20px;/* initial height */
width:100px;
background:#aaa;
-webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
-moz-transition: height .4s linear;
-o-transition: height .4s linear;
-ms-transition: height .4s linear;
transition: height .4s linear;
}
#myDiv:hover {
height:100px; /* desired height */
}
HTML:
<div id="myDiv">
Hello World!
</div>
Hope this helps.
EDIT: Sorry, I didn't see that you needed it to stay that height. In order to do that, you would need to use something like onmouseout (or another event listener), which in the end would use Javascript anyway.
Yes, this is possible with just CSS3, but will only work in Safari/Chrome and recent versions of Opera, Mozilla Firefox, and IE10 as you need CSS3 animation keyframes to preserve the end-state of the transition.
http://jsfiddle.net/rPc88/3/
Using a transition when enlarging an image doesn't seem to work in chrome.
HTML:
<img src="foobar.png">
CSS:
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
What is wrong?
It won't work with percentages it seems. Also, if you wish to transition height as well, you need to declare it in the orignal img styling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/ it works if you specify a width in pixels for the hover.
Edit: If you specify the first width as a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo
You can also use a max-width trick. Set a high max-width amount on the hover and the original image width will be respected by the transition.
http://codepen.io/rustydev/pen/BKOBNZ