AngularJS ng-show animation cross-fade inside ng-repeat - javascript

Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam

You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!

This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.

You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.

Related

Javascript Make div appear from top to bottom

I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}

JS,CSS,jQuery DIV 3D effect

I'm looking for one specific effect but I'm not sure what's it called or how should I search for it.
Basically, I'm after a 3D effect.
I have a DIV element, I'd like it to behave like it's placed on a ball (which is located below the center of it).
So when you mouse over the edges that edge will zoom out/in.
Has anyone seen anything like it? Is this achievable at all?
Edit:
Behaviour in this example best describes what I was after but with DIVs not text.
I think I'll be able to adjust this example for my needs.
Sorry if my description was too general, I wasn't sure how to describe what I needed.
You can use CSS Transition for this.
with css transition you can animate divs or objects.
Look at this great tutorial
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
an example:
JSFIDDLE
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>
</body>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
Hope it is what you mean.

hidden header drop down on click

For a site I am working on I'd quite like to use a similar drop down effect as here http://shop.jack-hughes.com/ when you click info a hidden div drops down.
I can't work out if it uses only CSS3 or Javascript/CSS can anyone point me in the right direction or tell me the name of the effect; pretty simple I guess but for the life of me can't find another example.
combination of CCS3 and js
Here is what is used in the website you refer
js:
Event.observe(window, 'load', function () {
Event.observe('info', 'click', function () {
$('aside').toggleClassName('open');
});
});
Event.observe is from the prototype framework - http://prototypejs.org/doc/latest/dom/Event/observe/
The equivalent in jQuery(http://jquery.com/) for instance would be:
$(document).ready(function () {
$('.info').click(function () {
$('aside').toggleClass('open');
})
});
css:
aside.open {
height: 21.25em;
}
aside {
position: relative;
background-color: #3f4642;
width: 100%;
color: white;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
The HTML element is <aside>....</aside> but it's no difference if you choose div.
They have a small piece of Javascript that does this that can be easily done on any website. Basically you need a hidden div at the top of your page, and upon clicking a link you simply show the div.
The code that they used was:
Event.observe('info', 'click', function(){
$('aside').toggleClassName('open');
});
But if you take a look at jquery then you will see that manipulation of elements is quite easy to do.
One thing that they do use in addition is a CSS3 transition in their open class:
.aside {
transition: all 0.3s ease-out 0s
}
This is what is causing the smooth transition effect. So you can use either jQuery or the CSS3 transition, both give the same effect. I would say that the CSS3 transition is nicer, but then again you will be alienating certain browsers if they do not support transitions.
Probably using jQuery. Something like:
http://api.jquery.com/toggle/
In addition to what Deif discovered they're also using CSS transition
transition: all 0.3s ease-out;
and also make use of the "::selection" pseudo class for their "aside" class, see developer.mozilla.org

CSS3 transition fade-out display property

I was trying to make fade out transition with css3 but found out that display is not working with transitions.
i have a group object <div id=groupID> with <h2> title and <div class='group'> and i have onclick event bind to <h2> that should make group class to dissapear. i've tried to overcome display problem with {opacity: 0; height: 0; overflow: hidden;} This works fine as it has same effect as {display:none} BUT with
CSS
transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;
JS
//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});
//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});
it doesn't do any animation on close but it fades in on reappearance. It just disappear instantly.
yes i need it in CSS3. NO, i can't use jQuery
any idea?
Thanks
Don't try and transition to and from auto. It won't work.
You may be able to calculate the height in pixels of the element with JavaScript and use that in your block.setStyle() calls.

I need to find prototype.js based slide out tab?

I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.

Categories