i am new in angular. so i run lots of small code finding from internet just for learning purpose. so now i was trying to learn animation with angular. bad luck the code i try to run because it is not working.
code snippet
var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', ['$scope',
function MainController($scope) {
$scope.animate = false;
$scope.play = function() {
$scope.animate = !$scope.animate;
}
}
]);
here is js fiddle https://jsfiddle.net/tridip/mvL0o2ew/
You forgot to include angular.js file itself. So include it, will work then.
Demo :
var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', function($scope) {
$scope.animate = false;
$scope.play = function() {
$scope.animate = !$scope.animate;
}
});
.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.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}
.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular-animate.js"></script>
<body ng-app="myApp" ng-controller="MainController">
<button ng-click="play()">play</button>
<div id='wrapper' ng-show="animate" class="animate-show animate-hide">TEST HERE</div>
</body>
You are receiving an error in the console:
angular.js:12520 TypeError: Cannot read property 'animate-show' of undefined
at lookup (angular-animate.js:365)
at performAnimation (angular-animate.js:688)
at Object.removeClass (angular-animate.js:583)
at Object.ngShowWatchAction [as fn] (angular.js:27760)
at Scope.$digest (angular.js:15896)
at ChildScope.$apply (angular.js:16160)
at HTMLButtonElement.<anonymous> (angular.js:23618)
at defaultHandlerWrapper (angular.js:3346)
at HTMLButtonElement.eventHandler (angular.js:3334)
you need to include properly the correct ng-animage module and it's classes
Related
I am using this script for a random image slideshow, trying to display sponsor images. The script works fine, I'm trying to create a fade in and/or fade out effect to it.
The script:
<script>
var delay=4000
var curindex=0
var randomimages=new Array()
randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
The script itself works fine.
This is the CSS I've tried for the image transition:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
When the page loads the fade in works on the first image, but none of the subsequent ones JSFiddle. I'm hoping someone could steer me in the right direction.
Here a solution, add notes inside:
var delay=4000
var curindex=0
var randomimages=new Array()
randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
//document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
// place the image on container:
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">';
function rotateimage()
{
document.querySelector('figure').innerHTML = ''; // clear image from container
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
// document.images.defaultimage.src=randomimages[curindex]
// place image with different source on the container
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[curindex]+'">';
}
setInterval("rotateimage()",delay)
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 4s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<figure></figure>
Additional important notes:
The key here is to create the element so the class will work. Now you are just changing src attribute so the class doesn't change (you can inspect that on browser dev tools).
On your code you use document.write. I change it to .innerHTML - both consider to be BAD practices on production. You should create and append nodes instead. I use it here cause it fast.
I have a header, whose className changes depending on State. Each class has a different background image, specified in the CSS. Everything works fine, but the transitions are quite abrupt without a fade-in effect.
I wrote:
.jumbotron-img-1{
background-image: url("/images/myImg1.jpg");
transition: all 1s ease-in-out;
It works, but it's ugly. There is a zoom, and a distortion of the image before it shows up in its final form. I've watched some tutorials on Google, but nothing was simple and to the point for background-image transition in pure CSS or React.
Any help would be greatly appreciated, thanks!
background-image is not an animatable property. I feel what best serves your purpose is to render multiple headers with all the classnames available stacked over each other with position: absolute; relative to common parent and make only one of them visible using opacity property based on which classname is active in your state and use transition on opacity
Sample working code:
render() {
const {imgClassList} = this.props;
const {activeimgClass} = this.state;
return (
<div className="header-container">
{imgClassList.map(imgClass => {
return (
<div
className={`header ${imgClass} ${(imgClass === activeimgClass)? 'active' : ''}`}
/>)
})}
</div>
)
}
And css be something like:
.header-container {
position: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
opacity: 0
transition: opacity 1s ease-in-out;
}
.header.active {
opacity: 1
}
.img-1 {
background:url('images/img-1')
}
.img-2 {
background: url('images/img-2')
} ... and so on
There's no good way to transition a background image using CSS because it's not an animatable property, per the CSS spec. One way to do this is to just have multiple images on top of one another, each containing a different one of the images you'd like to display, and then cycle through them by transitioning them to opacity: 0 and changing their z-index order.
I made a quick demo showing how you can achieve smooth changes by manipulating opacity and z-index. In pure Javascript, this is done by simply adjusting the styles with DOM manipulation and using setTimeout().
Of course in React you don't want to be doing DOM manipulation, so you can experiment with multiple classes with different opacity levels and transitions to accomplish this. There also seems to be a React component that enables all types of transitions: https://reactcommunity.org/react-transition-group/css-transition
Check out the Javascript solution demo to see how changing the opacity can get a crossfade effect on images:
function backgroundScheduler_1() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 0;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 1;
order(["-3", "-1", "-2"], () => { backgroundScheduler_2() }, 1000);
}, 3000);
}
function backgroundScheduler_2() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 0;
document.querySelector(".img3").style.opacity = 1;
order(["-2", "-3", "-1"], () => { backgroundScheduler_3() }, 1000);
}, 3000);
}
function backgroundScheduler_3() {
setTimeout(() => {
document.querySelector(".img1").style.opacity = 1;
document.querySelector(".img2").style.opacity = 1;
document.querySelector(".img3").style.opacity = 0;
order(["-1", "-2", "-3"], () => { backgroundScheduler_1() }, 1000);
}, 3000);
}
function order(array, callback, time) {
setTimeout(() => {
document.querySelector(".img1").style.zIndex = array[0];
document.querySelector(".img2").style.zIndex = array[1];
document.querySelector(".img3").style.zIndex = array[2];
callback();
}, time);
}
backgroundScheduler_1();
.background-image {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: 1s;
}
.img1 {
z-index: -1;
}
.img2 {
z-index: -2;
}
.img3 {
z-index: -3;
}
<div class="background-container">
<img class="background-image img1" src="https://placeimg.com/640/640/nature"></img>
<img class="background-image img2" src="https://placeimg.com/640/640/animals"></img>
<img class="background-image img3" src="https://placeimg.com/640/640/tech"></img>
<h2 style="color: white;">WOW!</h2>
</div>
I checked NPM momentarily and didn't see anything that promises this exact functionality. Hope this helps!
So i was reading the vue documentation about transitions & animations but i couldn't figure out how to do an animation on the switch progress (current background-color fade out and new one fade in) if you can give me a hint or a way to do it i will be thankfull check the code : https://codepen.io/Dadboz/pen/XypGoy
var app= new Vue({
el : '#container',
data (){
return{
background : '',
background2 : '',
background3 : '',
colors:['#7FDBFF','#0074D9','#7FDBFF','#39CCCC','#FFDC00','#F012BE','#DDDDDD','#B10DC9','#FF851B','#3D9970'],
}
},
methods:{
swc(){
this.background = this.colors[Math.floor(Math.random()*10)]
this.background2 = this.colors[Math.floor(Math.random()*10)]
this.background3 = this.colors[Math.floor(Math.random()*10)]
}
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
<transition name="fade" mode="out-in">
<div :style="{backgroundColor : background}" id="container">
<div :style="{backgroundColor : background2}" id="box">
<div :style="{backgroundColor : background3}" id="boxin">
</div>
</div>
</transition>
You seem to be looking for
transition-property: background-color;
See transition shorthand property specification. In short:
transition div {
transition: background-color 4s;
}
...should do it.
I am quite new to react and I am trying to build a react app. I want a login box to fade in on the page when the login in the navbar is clicked. In my App.js I set up the CSSTransitionGroup like this:
<CSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionAppear={true}
transitionAppearTimeout={500}
transitionName="fade">
{loginPopup}
</CSSTransitionGroup>
The login popup is shown based on state:
let loginPopup;
if (display_login) {
loginPopup = (<LoginPopup key={1} />)
}
Now the css I use for the transition looks like this:
//fade
.fade-appear {
opacity: 0.01;
}
.fade-appear-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
My problem is...that the fadeout works as intended, but the fadein does not work. It just pops up (no transition).
I also tried using .fade-enter - But I figured that enter was wrong as the LoginPopup component is spawned based on state.
Any ideas why the fade in don't work?
Edit:
This is the gist of the code: https://gist.github.com/xenoxsis/6345eb6897aedf228662ffaf64f65053
I have a simple scope of a list of names:
$scope.friends = [
{name:'John'},
{name:'Jessie'},
{name:'Johanna'},
{name:'Joy'},
{name:'Mary'},
{name:'Peter'},
{name:'Sebastian'},
{name:'Erika'},
{name:'Patrick'},
{name:'Samantha'}
];
I perform a simple ng-repeat over these items, and display on my front end. What i want to try to achieve is that each item/name transitions in, one after each other, like a chain.
The closet to the effect i have seen can be found here: http://jsfiddle.net/57uGQ/ however this uses jQuery libraries which i want to avoid.
I am using the ng-animate library if that helps?
See plunker: http://plnkr.co/edit/aGwEe2jlGBTvjoSsiK9p?p=preview
You can use a combination of ng-if, $timeout and the .ng-enter-stagger css class to replicate the effect in the jsfiddle example.
html:
<div ng-controller="repeatController">
<ul>
<li class="animate-repeat" ng-repeat="friend in friends" ng-if="!hidden">
{{friend.name}},
</li>
</ul>
</div>
js:
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope, $timeout) {
$scope.friends = [
{name:'John'},
{name:'Jessie'},
{name:'Johanna'},
{name:'Joy'},
{name:'Mary'},
{name:'Peter'},
{name:'Sebastian'},
{name:'Erika'},
{name:'Patrick'},
{name:'Samantha'}
];
$scope.hidden = true;
$timeout(function(){
$scope.hidden = false;
}, 10);
});
css:
.animate-repeat.ng-enter {
transition: 1s linear all;
opacity: 0;
}
.animate-repeat.ng-enter-stagger {
transition-delay: 1.2s;
transition-duration: 0s;
}
.animate-repeat.ng-enter.ng-enter-active {
opacity: 1;
}
Plunker