We Keep Coding

Control img's border perimeter by time countdown - from full circle, through partial arc, to nothing

I use html, css, angularjs in the front.
I've got an img which in the initial state is surrounded with a full circle of a thick border. I start a countdown of a minute. I would like the border to get partially disappeared as the time goes down.
For example, after the first second only 59/60 of the perimeter of the border is shown, after the second one only 58/60 is shown, ..., after 30 seconds there's only a half of a circle and so on, until it gets totally disappeared.
In addition, if it's possible, I would like the transitions to be smooth.
Thanks for any help

You have to use a combination of ng-class for conditionnal CSS on your case AND css transition.
See for example this example of a smooth transition that is for a 5s for an element to be half visible
#myTransition {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}

add transparency on hover on a div but with time delay

I want my div to become partially transparent 1 second after I hover cursor on it. When no longer hovering I want it to return to its default full opacity immediately without any time delay.
I know very very javascript so I don't know how to do this.
Any help much appreciated thanks in advance

Actually, you shouldn't use js in this case. CSS Transitions would be better, cause they are smoother and more efficient than js/jQuery animations.
Below you have example with 2 seconds delay on hover.
.btn{
display: inline-block;
padding: 5px 10px;
background: rgba(0,0,0,1);
color: #fff;
text-decoration: none;
-webkit-transition: background 0.5s ease 0s;
transition: background 0.5s ease 0s;
}
.btn:hover{
-webkit-transition: background 0.5s ease 2s;
transition: background 0.5s ease 2s;
background: rgba(0,0,0,0.5);
}
Text

ng-if slow on element with transitions?

I'm with angular 1.4, and i hope this one is a common, and solvable problem:
I have an div with background image of a ball, the div has the following extra styling:
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Because the ball moves left and right with a smoothing transition (the one from the style).
When i ng-if this div to false, when it needs to disappear, the div is stuck there for a sec (or half a sec?), is there any way around this behaviour?
It's not a matter of $digest or $apply, and without the transitions it goes away quickly and normaly.

Smoothly transitioning header navigation classes

I created this site with a header that transitions using jQuery Ui and twitter bootstrap. The idea is that there are two classes .navbar-transparent and .navbar-white and I use the .switchClass() function that jQuery Ui Effects provides that transitions the change in the two classes when the scroll position of the page isn't at the top.
The problem however, the nav as it is now is, I believe the technical term is "janky". The transition isn't smooth, and when going from transparent to white the none of the font color doesn't transition at all, it just plops into black.
This shopify theme Retina / Austin does a great job of making that transition smooth with a css transition.
.header{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
Here's my javascript code:
mindful_matter.header = function() {
if ($(".navbar-transparent").length == 0) return false;
var callback = function() {
var scrolled_val = $(document).scrollTop().valueOf();
if (scrolled_val > 0) {
$(".navbar").switchClass("navbar-transparent", "navbar-white");
} else {
$(".navbar").switchClass("navbar-white", "navbar-transparent");
}
}
callback();
$(window).scroll(callback);
}
Is there any way I can make the transition smoother? Using the setup I already have? Can I use a css transition when I have two classes that need to be swapped for one another?

.navbar{
transition: background-color 500ms 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/