I'm using ng-view with ng-animate like so:
HTML
<body>
<div ng-view></div>
</body>
CSS
.view.ng-enter,
.view.ng-leave { transition: all 600ms ease-out; }
.view.ng-enter {
position: absolute;
top:0; left:240px;
width: 100%;
opacity: 0; }
.view.ng-enter.ng-enter-active {
opacity: 1;
left: 0; }
.view.ng-leave {
position: relative;
left: 0;
opacity: 1; }
.view.ng-leave.ng-leave-active {
opacity: 0;
left: -240px; }
Now throughout my app there are links that will change the view. The animation of the view changing works perfectly.
I now want to add animation to the body whenever the view changes. So basically, whenever .view.ng-view is active, a style needs to be applied to the body, which should be removed when the view animation is no longer active. How on earth do I do that?
I have trying to find this for a while myself, it works fine if you are adding and removing classes, but with ng-view its unique in that it's transition of 2 routes, and I haven't seen anything related to an emitter or anything. You have a few options though.
Here's a plunker;
1) The easy answer would be to add and remove an animation with a $timeout, with the same duration as the css for .view.
$rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
var body = $document.find('body');
$animate.addClass(body, 'overlay');
$timeout(function() {
$animate.removeClass(body, 'overlay');
}, 1000);
2) Another way is inside of the enter function you can put something in front of the done callback like, jQuery or TweenMax in this case.
app.animation('.view', function() {
return {
enter: function(element, done) {
TweenMax.from(element, 1, {
color: 'red',
onComplete: function() {
$log.debug('done');
done();
}
});
},
...
I would proberly look into something like jQuery to add a class to the body when the ng-view is active.
You could also have look into the ngAnimate which is explaining to perfection:
link to a very precise description of ngAnimate
Related
In header i have search field, which should have with same lice container.
Some how i need to make biger input, example:
[![enter image description here][1]][1]
My code jsFiddle
$(".search-input").on("mousedown", function () {
$(this).addClass('active');
$('.search_container').addClass('test')
});
$(".cancel-icon").on("mousedown", function () {
$('#search-content').hide();
$('.search-input').removeClass('active');
$('.search-input').val('');
$('.search_container').removeClass('test')
});
For some reason input don't wanna go biger -_-
create one more class of your name. I just call it as .some and it to div.search-field when input is active and remove it when cancel-icon is clicked.
.some{
flex-shrink: 0;
width: 100%;
transition: width 1s;
}
.search-field{
...
width: 50%;
...
}
$(".search-input").on("mousedown", function () {
...
$('.search-field').addClass('some');
});
$(".cancel-icon").on("mousedown", function () {
...
$('.search-field').removeClass('some');
});
display: flex making the .search-field shrink. In order to avoid that I added flex-shrink: 0
Updated
Added transition: width 1s to animate a width of .search-field and added an extra style width: 50% to an existing .search-field which doesn't change the existing size but it will make impact in transition.
I am looking for a way to animate (with #keyframes, transform...) some elements when the user scrolls the page. For example:
When offset is 0: div has height: 100px.
When offset is between 0 and 100: div is height: 50px and color: blue.
And so on...
Is is possible using pure CSS?
If it is not, what are the most efficient ways to do it with HTML or Javascript?
The most efficient way to animate an element's style properties depending on scroll position will probably be to add a class with a scroll function:
Working Example
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y > 500) {
// myID.style.backgroundColor = "blue"; // you can add individual styles
myID.className = "blue" // or add classes
} else {
// myID.style.backgroundColor = "red";
myID.className = "red"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 1100px;
}
#myID {
position: fixed;
height: 100px;
line-height: 20px;
transition: all 1s;
}
.blue {
background: blue;
animation: myAnimation 1s both;
}
.red {
background: red;
}
#keyframes myAnimation {
0% {
border-radius: 0px;
line-height: 10px;
}
100% {
border-radius: 100%;
line-height: 100px;
}
}
<div id="myID" class="red">Hello world</div>
Docs:
.scrollY
.className
.addEventListener
Methinnks it's not possible to 'spy' scroll with pure css. If you want, you can do this with jQuery:
$(document).scroll(function() {
var pos = parseInt($(document).scrollTop())
if(pos == 0) {
$('.yourDivClass').css({
height : '100px' ,
color : '#fff'
})
}
if (pos > 0 && pos <= 100) {
$('.yourDivClass').css({
height : '50px' ,
color : 'blue'
})
}
console.log(pos)
})
and of course if you wanna get a smooth transition, you supposed to declare transitions in your css file
.yourDivClass {
transition: height 0.5s ease
}
Scrolling is an event. Once you scroll the page, the event gets triggered and something happens. You cannot control events using Pure CSS. Period.
Some people would argue that even :hover is an event. Yes, and it is for some strange reason, implemented in CSS, but not others.
With pure CSS: no.
But you can have a class with keyframed animation associated with it, and then say when the element is scrolled into view, to add the class to the element. This will make it start doing the animation.
You can use Waypoints.js to set what happens when you reach a specific element of a page.
I'm trying to make a normal HTML5 <button> that has an animated radial timer as a background.
My use case will be a button that refreshes a view. You can click it to refresh (thereby also restarting the timer), but the view will automatically refresh once every two minutes. This timer in the background of the button will serve as an indicator of how long it has been since it last refreshed and how long it will be until it automatically refreshes again.
I only need it to work in reasonably recent versions of Chrome, Firefox, and Safari. Don't sweat IE.
I managed to do what I wanted using SVG and a <polygon> that had its points recalculated using requestAnimationFrame, but it didn't work well in Firefox and it caused my MBP's fan to kick on. I'm sure I could do this in a <canvas>, but isn't there some way to do this using only CSS?
I know that the effect may be hard to visualize with my description above, so here are some examples that are close to what I'm trying to achieve.
These two use <canvas>, but you should be able to get the idea. I'm not looking for anything that fancy, though. A solid color is fine.
This one comes very close, but it uses SVG. Even though the animation is achieved with a CSS transition, the SVG is still taxing my CPU.
One final note is that I'm trying to make a background, not an overlay. Text (or in my case a fontawesome glyph) will sit on top of the background.
See if you can do anything with these classes and script.
var myCounter = new Countdown({
seconds: 120, // number of seconds to count down
onUpdateStatus: function (sec) {
}, // callback for each second
onCounterEnd: function () {
} // final action
});
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds,
updateStatus = options.onUpdateStatus,
counterEnd = options.onCounterEnd;
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
myCounter.start();
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: black;
}
.arc {
overflow: hidden;
position: absolute;
top: 0em; right:50%; bottom: 50%; left: 0em;
transform-origin: 100% 100%;
transform: rotate(90deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 8em grey;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
<div class="circle">
<div class="arc"></div>
</div>
As the title says I want to show a hidden span "box" when hovering an image, but I can't get it to work, so I was hoping you guys could figure out my mistake.
HTML
<span class="DDAA__bg">
<h1 class="DDAA__headline">DANSK DYREVÆRN ÅRHUS</h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200" alt="Dansk Dyreværn Århus"/>
</span>
CSS
span.DDAA__bg{
height: 200px;
width: 980px;
background-color: #666;
position: absolute;
display: none;
}
span.DDAA__pic{
display:block;
visibility: visible;
}
span.DDAA__pic:hover{
visibility: hidden;
transition-delay: 2s;
}
span.DDAA__pic:hover + span.DDAA__bg{
display:block;
}
You can see here how it works now, not as good :/
http://jsfiddle.net/ary3bt83/3/
element:hover > other_element {
display: block;
}
this is equal to the jQuery code
$(element).on('hover', function() { $(this).css("display", "block"); });
But doing hover on css sometimes is really buggy...
First you need to have jQuery installed ( look for jquery.js / jquery.min.js in source code or google for w3c jquery install )
After this you write following :
<script>
$(document).ready(function() {
// everything here is done once the page is loaded
// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
// show the element
$(".the_element_to_be_shown").css("display","block");
});
});
</script>
Don't forget that you must initially set display: none to the div that is first hidden and then shown. Also instead of .css("display","block") you can have simple animation like .fadeIn("slow");
I have this very simple code:
$(document).ready(function() {
$('.content>div').hide();
$('.content>h3').click(function() {
$(this).next().slideToggle('fast');
$(this).toggleClass('active');
});
});
it causes of course that my div slides out from top to bottom. Could you help me add to this code or command the line that in result it will be slide out from right to left??
.slideToggle() animates the height of the matched elements so you will likely have to rely on a different function/method - but this is not that difficult. You can do this either in JavaScript or use CSS3 animation properties. Depends on the use case but I'd probably use the CSS3 option because it is hardware accelerated on most devices so it is smoother.
Here's a simple sketch how that could be done
In the JavaScript file:
$('.content>h3').click(function() {
// just switch the class 'open' the rest is defined in CSS
$(this).next().toggleClass('open');
$(this).toggleClass('active');
});
And in the CSS file:
.content div {
width: 0;
overflow: hidden;
transition: width 1s ease-out;
}
.content div.open {
width: 100%;
}
Example:
http://jsbin.com/qebigohu/2/ (preview)
http://jsbin.com/qebigohu/2/edit (code)