In this below example
http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview
<div class="container">
<div ui-view></div>
when i am clicking on home or about button the view part is loading directly. But i need to move the current page(home) from right to left and new page(about) should load from right to left(transition effect)
How can this possible?
I have fixed the issue by using ng-animate, added below css in to my code
[data-ui-view].ng-enter, [data-ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[data-ui-view].ng-enter {
opacity: 0;
-webkit-transform:translate(960px);
-moz-transform:translate(960px);
transform:translate(960px);
}
[data-ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:translate(0px);
-moz-transform:translate(0px);
transform:translate(0px);
}
[data-ui-view].ng-leave {
opacity: 1;
/*padding-left: 0px;*/
-webkit-transform:translate(0px);
-moz-transform:translate(0px);
transform:translate(0px);
}
[data-ui-view].ng-leave-active {
opacity: 0;
/*padding-left: 100px;*/
-webkit-transform:translate(-960px);
-moz-transform:translate(-960px);
transform:translate(-960px);
}
Related
I have been using ReactCSSTransitionGroup for basic animations - like slide in from left to right and right to left 2 images, but not able to acheive it - what am I missing here - the images animate but go back to their original position as soon as the animation is over - it is not looking good on the screen.
<ReactCSSTransitionGroup transitionName="square1" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-1" src="/images/sqr.svg" />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="square2" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-2" src="/images/sqr2.svg" />
</ReactCSSTransitionGroup>
css:
.square-1{
opacity: 0.4;
float:left;
position: absolute;
top:60px;
width: 150px;
left:-35px;
}
.square-2{
opacity: 0.4;
float:right;
width: 150px;
position: absolute;
right:-10px;
top:30px;
}
.square1{
position: absolute;
border:1px solid green;
left:10px;
top:90px;
}
.square1-appear {
opacity: 0.01;
transition: all 2s linear;
position:absolute;
left:-200px;
}
.square1-appear.square1-appear-active {
opacity: 0.4;
transition: all 2s ease-in;
position:absolute;
left:-30px;
top:-10px;
}
.square1-leave.square1-leave-active{
border:1px solid red;
}
.square2{
position: absolute;
right:10px;
top:30px;
}
.square2-appear {
opacity: 0.01;
transition: all 4s ease-in;
position:absolute;
right:-200px;
}
.square2-enter {
opacity: 0.01;
position:absolute;
right:-400px;
}
.square2-appear.square2-appear-active {
opacity: 0.8;
transition: all 2s ease-in;
position:absolute;
right:100px;
}
I get an issue with ngAnimate and ngMessages currently. I am able to animate when the message appear but not when it disappear.
If anyone can help me on this because the documentation don't seems very "clear" to me.
Here's my HTML :
<div ng-messages="loginError" class="login-error" flex layout layout-align="center center">
<p ng-message="invalid_credentials">Combinaison d'email et de mot de passe <strong>invalide.</strong></p>
<p ng-message="could_not_create_token">Impossible de créer le jeton</p>
<p ng-message="unknown_error">Erreur inconnue.</p>
</div>
And here's my CSS :
.login-error {
color: #DD2C00;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
max-height: 0;
opacity: 0;
}
.login-error.ng-active, .login-error.ng-active.ng-active-add-active {
max-height: 30px;
opacity: 1;
}
.login-error.ng-inactive, .login-error.ng-active.ng-inactive-add {
max-height: 0;
opacity: 0;
}
.login-error {
color: #DD2C00;
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.login-error.ng-active {
max-height: 30px;
}
.login-error.ng-inactive {
max-height: 0;
}
.login-error-msg {
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.login-error-msg.ng-enter {
opacity: 0;
max-height: 0;
}
.login-error-msg.ng-enter-active {
opacity: 1;
max-height: 30px;
}
.login-error-msg.ng-leave {
opacity: 1;
max-height: 30px;
}
.login-error-msg.ng-leave-active {
opacity: 0;
max-height: 0;
}
Solved my issue !
How can I remove the "≥" link button (and the line it occupies) which appears above my thumbnails when using Lightbox2? I have checked through the CSS which accompanies the js and cannot find it anywhere.
In the lightbox2 CSS sheet the images that attach to those white next link buttons can be found in this block of code. Don't forget to remove it from the states like a:hover. You can always go to other websites for similar png files to change the slider options for nav left and right.
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:
http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview
With the key bit being this CSS here:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
display: block !important;
}
.accordion-body.ng-hide-add{
}
.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
height:0;
}
But I can't figure out how to get it to work for opening the item. I'm obviously doing something braindead - what am I missing?
Got it working with the following CSS:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.accordion-body.ng-hide-remove {
display: block !important;
height: 0px;
}
.accordion-body.ng-hide-remove.ng-hide-remove-active {
height: 100px;
}
.accordion-body.ng-hide-add{
height: 100px;
}
.accordion-body.ng-hide-add.ng-hide-add-active {
height: 0;
}
You messed up a class name is all.
I'm using ngAnimate to animate max-height for a simple slide-toggle effect, and there's something a bit strange happening: when hiding, it seems that setting the transition property on the setup class (.xxx-hide) doesn't work--the height snaps to 0 immediately:
.controls-hide {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 5em;
opacity: 1;
}
.controls-hide.controls-hide-active {
max-height: 0em;
opacity: 0;
}
But setting it on the active class (.xxx-hide.xxx-hide-active), the animation works just fine:
.othercontrols-hide {
opacity: 1;
max-height: 5em;
}
.othercontrols-hide.othercontrols-hide-active {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 0em;
opacity: 0;
}
(Here's the whole fiddle.)
Even more strangely, the opacity animates just fine in both cases. What's going on here?
I just follow the instructions at this site: http://www.nganimate.org/angularjs/ng-repeat/appear
And I got this fiddle working: http://jsfiddle.net/WXWSu/2/
What I changed was set the transtion tag to all changes (transition: 1s linear all;), and set the start properties at the main class:
.exercise-controls {
overflow: hidden;
border: 1px solid black;
height: 5em;
opacity: 1;
}