We Keep Coding

Requirements for content widget which reveals only when triggered by mouse click. Troubled on requirements of JS or if CSS can perform this

I am building a module for a website that displays mostly text information for different subjects and categories, and within each module will be a function that, when triggered by mouse click, reveals a citation/source reference collection for the subject. I have located an existing service, known as graphiq.com, that is very very close to what I am building. I am presenting graphiq's embeddable data module as an example.
Their embedabble module contains a subject (in my example, an Orca) and presents primarily descriptive text about the animal.
The function that I am specifically asking for help on is the "Show Details" element contained in the lower portion of the module. It is a clickable link that when triggered by mouse, reveals with a brief animation a new portion of text that contains the references to sources, and other additional text information relevant for citation and source confirmation.
Here is a before and after screenshot of the graphiq.com module.
http://imgur.com/x5TvAI2
And here is the actual module.
https://www.graphiq.com/vlp/k0i6yt5ld9X
My diligence so far informs me that for certain there is CSS class named dsrc dsrc-expand-overlay that has the following transform code
.dsrc-expand-overlay {
-webkit-transition: -webkit-transform .35s ease;
transition: -webkit-transform .35s ease;
transition: transform .35s ease;
transition: transform .35s ease,-webkit-transform .35s ease;
transition-property: transform, -webkit-transform;
transition-duration: 0.35s, 0.35s;
transition-timing-function: ease, ease;
transition-delay: initial, initial;
background-color: white;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-top: 1px #e1e1e1 solid;
bottom: 0;
left: 0;
right: 0;
z-index: 550;
position: absolute;
display: block;
}
However, I believe it is also calling upon JavaScript as when I inspect the Event Listener Breakpoints in Chrome Dev Tools, and I click that "Show Details" text, I am informed of the jquery.min.js file firing at the line that contains this instruction:
return function() {
b && (delete Dc[g],
b = f.onload = f.onerror = null,
"abort" === a ? f.abort() : "error" === a ? d(f.status, f.statusText) :
d(Ec[f.status] || f.status, f.statusText, "string" == typeof
f.responseText? {
text: f.responseText } : void 0, f.getAllResponseHeaders()))
}
}
I have been unable to reproduce the animated reveal effect in my own experiments using that CSS code, and am stuck as I am very new to JavaScript which means I may be mis-diagnosing the failure to not capturing this functions proper JavaScript in its entirety.
I have created a JSFiddle with the graphiq.com orca module that I just pulled code using Chrome Dev Tools, that is broken, to share for further clarity.
http://jsfiddle.net/apsfgcz0/

onTransitionEnd not working Android 4.3 Samsung S3

I have a small nifty game I'm trying to develop at this link which has css transition class definitions
`el {
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
position:absolute;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
top:0;
}
.close {
transition-duration: .15s;
-webkit-transition-duration: .15s;
}
.open {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}`
on elements and uses a [prefix]TransitionEnd event to function.
$el.on(transitionEnd,function(){ // transitionEnd is a polyfill result from browser sniff
if($el.hasClass('close'))
setTimeout(function(){
$el.addClass('open');
},Math.random() * 2500));
else $el.addClass('close').removeClass('open');
});
The expected result is that the function would change the element's translate3d() based on the class add/removed each time the transition ends.
I am able to see this in action on desktop and mobile browsers except for the Samsung Galaxy S3 running Android 4.3. I was told that on the S3 that it runs only once and the elements remain with the ".close" class. I don't have an actual device but the little debugging I did is leading me to believe that the [prefix]TransitionEnd is not firing when changing the class definitions which affects the transitions. Can anyone with a Samsung S3 with Android 4.3 try it out and let me know if it works...and what workaround I can use to solve it?

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

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.

sliding transition animatio between two web page

for example i have few webpage
how can i click the link in 1.html to 2.html
then 1.html slides to left and 2.html loada and slide from right?
just like this effect:
https://delicious.com/join
and the github project as well
https://github.com/CyanogenMod/android_packages_apps_Settings
there have no browser refresh blink
and the URL also changed.
is it using jquery?
I must use mvc php framework or rails to build the site?
how can I create some webpage like this?
any open source project or example code for that?

If what your asking is how to do the animation, then JQuery was the one responsible for it.
You can check this link for reference :
Downloads
Demo
Or you could try another search in the internet , just type "Fancy Sliding Forms"
Actually it all depends on you web designer/developer on how to implement that Jquery. Just read the docs.
God Speed!

Recently the challenge for me was to develop lightweight web applications, so I resorted to using minimal of jQuery because when viewed in mobile, the smooth behaviour was not guaranteed. So I chose hardware accelerated css transitions.
You can place the contents of web pages in two divs and dynamically add and remove classes to see this effect.
/* CSS */
.page-one {
width: 100%;
-webkit-transform : translateX(0px);
height:100%;
position: fixed;
background-color: #fff;
color : #6B6B77;
box-shadow: -3px 3px 3px #ddd;
overflow: auto;
}
.page-one.invisible {
-webkit-transform: translateX(-100%);
}
.page-one,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-two {
-webkit-transform: translateX(100%);
}
.page-two.visible {
-webkit-transform: translateX(0px);
}
.page-two,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Fading photos in slideshow using CSS

I have a website, and a slideshow of pictures on the main page. Before a photo is removed, I write the next photo behind it and then remove it. I wanted to know how I can add a fading effect before the photo is removed. my website is: guyzyl.org, so you can check out what im talking about. Also I dont know how to use Jquery, so please dont offer that solution. Thanks for any help. Guy Z.

.photo{
-webkit-transition: opacity .5s ease-in-out; /*Webkit*/
-moz-transition: opacity .5s ease-in-out; /*Firefox*/
-o-transition: opacity .5s ease-in-out; /*Opera*/
transition: opacity .5s ease-in-out; /*CSS3 Standard*/
opacity: 1;
}
.photo.fade{
opacity: 0;
}
document.querySelector(".photo").classList.add("fade");
See Demo: http://jsfiddle.net/DerekL/jzLZZ/