I have some code like this https://stackoverflow.com/a/18235271/3018275
So I wanted to do an animation like this http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation
But I've seen that ng-animate doesn't work with ng-src so i thought to use something with ng-show and a watch event to set a boolean variable, but i can't do this.
Anyone can suggest me something?
The best practice is to make a directive for the slider but you could do something like this. Its missing some code but this is the approach you should have.
In your html:
<div id="image-slider" ng-style="sliderStyle">
<div class="image" ng-repeat="(key, source) in imagesServingUrl track by $index" ng-style="imgStyle">
<img class="productImage" ng-src="{{source.serving_url}}" ng-class="{'hideImg':(current!=key), 'showImg':(current==key)}" />
<span class="arrow-right" ng-click="next(current+1)"/>
<span class="arrow-left" ng-click="prev(current-1)"/>
</div>
</div>
`
And in your css:
img.showImg {
opacity: 1;
-webkit-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-moz-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-ms-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
-o-transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
transition: 0.5s cubic-bezier(0.49, 0, 0.5, 1) all;
}
img.hideImg {
opacity: 0;
-webkit-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-moz-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-ms-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
-o-transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
transition: 0.5s cubic-bezier(0, 0.5, 1, 0.47) all;
}
And in your controller
$scope.next = function(next) {
$scope.current = next;
$scope.percent -= 100;
return $scope.imgStyle = {
transform: 'translateX(' + $scope.percent + '%)',
width: $scope.sliderWidth,
height: $scope.sliderHeight
};
};
Related
Thank you for reading my question
.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>
Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!
Is there any way to do animation like this hover but if mouse is not on image... it keeps going?
Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?
You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.
#container {
border: 1px solid black;
}
.logo_img {
width:100px;
margin-left: calc(50% - 50px);
}
#container:hover .logo_img {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
#keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }
50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img">
</div>
var duration = 500;
$('img').mouseenter(function() {
$(this).addClass('hvr').delay(duration).queue(function() {
$(this).removeClass('hvr');
$(this).dequeue();
});
});
CODEPEN
If you mean to make animation work without hover then add this animation-iteration-count to infinite.
.logo_img {
-webkit-animation: hvr 5s ease-out;
-ms-animation: hvr 5s ease-out;
animation: hvr 5s ease-out infinite;
}
Updated another answer using jQuery,
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
$(document).ready(function(){
$("img").on("mouseenter",function(){
$(this).addClass("logo_img");
});
$("img").on("mouseleave",function(){
$(this).removeClass("logo_img");
});
});
I have a question that I hope you can help me at this. I'm trying to build a webpage compatible with modern and old browsers. So I use Modernizr.js and for .cssanimations classes I wrote a code to use css3 when it's supported.
So I wrote the code below:
.loaded .main-menu .item:nth-child(2){
top:calc(50% - 25px);
left:calc(50% - 25px);
background-color:yellow;
opacity:0;
}
.cssanimations .loaded .main-menu .item:nth-child(2){
-webkit-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
-moz-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
-o-animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
animation:moveicon2 1s forwards 0.1 cubic-bezier(0.42, 0, 0.05, 1.87);
}
instead of these codes:
.main-menu .item:nth-child(2){
top:calc(50% - 25px);
left:calc(50% - 25px);
background-color:yellow;
opacity:0;
-webkit-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
-moz-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
-o-animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
animation: moveicon2 1s forwards 0.1s cubic-bezier(0.42, 0, 0.05, 1.87);
}
And this is my html codes:
<html class="no-js cssanimations">
<head>
//
</head>
<body class="loaded">
<section id="sectionOne" class="section section-1">
<div class="main-menu">
A
B
<div class="item">menu</div>
</div>
</section>
But It doesn't work And my animation isn't ran correctly. For some elements it does work but for some else elements the animation doesn't work at all.
Please let me know where was my fault?
I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.
Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/
the css:
.panel img {
opacity:0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img{
opacity: 1;
}
.img2{
opacity:0;
-moz-transition: opacity 10000ms ease-in-out;
-webkit-transition: opacity 10000ms ease-in-out;
transition: opacity 10000ms ease-in-out;
}
.shown1 img2{
opacity: 1;
}
the html :
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3"/>
<img class="img2" src="http://lorempixum.com/200/200/people/1"/>
</div>
my jquery attempt:
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');
There's a couple of things you may fix to get it working:
1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:
.shown1 .img2{
opacity: 1;
}
2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:
.panel .img2{
opacity:0;
-moz-transition: opacity 10000ms 2s ease-in-out;
-webkit-transition: opacity 10000ms 2s ease-in-out;
transition: opacity 10000ms 2s ease-in-out;
}
See it in action here: http://jsfiddle.net/FL3RK/2/
Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.
EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:
.shown1 .img2{
opacity: 1;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
Working fiddle: http://jsfiddle.net/FL3RK/3/
var finished = 0;
var callback = function (){
// Do whatever you want.
finished++;
}
$(".div"+finished).animate(params, duration, null, callback);
html
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/1"/>
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/4"/>
css
img {display:none;}
script
$("img").each(function(i) {
$(this).fadeIn(2000*(i+1));
});
see the fiddle http://jsfiddle.net/vishnurajv/px7U5/
Setting the text colour of an ID with CSS transitions isn't working. It just changes it to red, but doesn't ease it.
document.getElementById('colourword').innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";
var flash = document.getElementById('flash');
flash.style.color = "#dd0000";
If I type in the console document.getElementById('flash').color = "000"; It will then fade black.
Any ideas?
Its like a instant change on the color and it dosen't know what to change color from
This works for me:
document.body.innerHTML =
"<span id='flash' style='color: #000; transition: color 0.5s ease-in 0.5s; -moz-transition: color 0.5s ease-in 0.5s; -webkit-transition: color 0.5s ease-in 0.5s;'>X</span>";
setTimeout(function() {
var flash = document.getElementById('flash');
flash.style.color = "#dd0000";
},0);
I try to animate the change of a ng-view div in AngularJS.
So my div inside my index.html file looks like:
<div ng-view></div>
I have another html-file (view1.html) with just divs inside.
My app.js with the routing looks like:
app.config(function($routeProvider) {
$routeProvider
.when('/sites/:templateID',
{
controller: 'simpleController',
templateUrl:'templates/question.html'
})
});
I am changing the path with a click on a button, and call this:
$location.path("/sites/" + nextID);
The URL changes of the site, and only the ng-view-div gets updated. But when i am applying a ng-animation to it:
<div class="content" data-ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>
It doesn't work. I included AngularJS 1.2.5, the animate-js file inside my index.html and also my CSS:
.animate-enter, .animate-leave {
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
.animate-enter {
left: -100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active {
left: 100%;
}
Is there a way to animate the ng-view change through route-(URL)-changing?
ng-view can work with animation. In fact there is official example of it. Check out this link.
Also remember that you also need to declare ngAnimate dependency for it to work:
var app = angular.module('App', [
'ngRoute',
'ngAnimate'
]);
HTML
<div class="content">
<div class="question" ng-view></div>
</div>
Class .question defines CSS animation:
.question.ng-enter,
.question.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
Your modified demo Plunker.
Mini-project
I also created a little project demonstrating different ngView animations. Check it out this page.
There are a few changes to the CSS rules with Angular Animation 1.2+. ng-animate directive is no longer used so AngularJS now changes the class of the element based on events, such as hide, show, etc.
You can define these like so in your CSS:
.toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
.toggle.ng-enter {
opacity: 0;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-enter-active {
opacity: 1;
}
.toggle.ng-leave {
opacity: 1;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-leave-active {
opacity: 0;
}
.toggle.ng-hide-add {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity: 1;
}
.toggle.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.toggle.ng-hide-remove {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity: 0;
}
.toggle.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
That way when you have your HTML element you really only have to define the class="toggle" for example. When your app runs Angular will append the classes appropriately.
Here is a good resource for different animation techniques by Augus
And here is a break down of the changes in AngularJS Animations
In 1.2+ you no longer need the directive, the css notation has changed aswell.
The 1.2.5 way of doing it is as follows:
Give your View a class:
<div data-ng-view class="mainview-animation"></div>
Add the following dependency:
/**
* Main Application & Dependencies
* #type {*}
*/
var mainApp = angular.module('app', [
// Angular modules
'ngRoute',
'ngAnimate'
]);
Then add the following CSS:
/*
The animate class is apart of the element and the ng-enter class
is attached to the element once the enter animation event is triggered
*/
.mainview-animation.ng-enter {
-webkit-transition: .3s linear all; /* Safari/Chrome */
-moz-transition: .3s linear all; /* Firefox */
-o-transition: .3s linear all; /* Opera */
transition: .3s linear all; /* IE10+ and Future Browsers */
}
/**
* Pre animation -> enter
*/
.mainview-animation.ng-enter{
/* The animation preparation code */
opacity: 0;
}
/**
* Post animation -> enter
*/
.mainview-animation.ng-enter.ng-enter-active {
/* The animation code itself */
opacity: 1;
}
Just to add to the accepted answer it is necessary to either define position: absolute or display: block to .ng-enter and .ng-leave. I struggled with this for a while when trying to fade in ng-view on route change and didn't want to use absolute positioning. Example without browser prefixes for transition:
//add animate class to ng-view
//css
.animate.ng-leave, .animate.ng-enter {
transition: 1s cubic-bezier(0.5, 0.1, 0.25, 1) all;
}
.animate.ng-enter, .animate.ng-leave.ng-leave-active {
opacity: 0;
display: block;
}
.animate.ng-leave, .animate.ng-enter.ng-enter-active {
opacity: 1;
display: block;
}
For my specific situation I removed the transition from ng-leave so there wouldn't be overlap of elements which would cause one to be pushed down due to block display.