I want to switch between 2 elements in one place. When switching, current element will fade out, and after that, the next element will fade in to replace the old one. So I set a delay time for the .ng-hide-remove to get this effect.
But before the next element shows up, it occupies space in the DOM and breaks the layout of the page.
How can I fix this?
Here is the fiddle link: fiddle
css:
div {
transition: all linear 0.5s;
}
#div1 {
background-color: lightblue;
}
#div2 {
background-color: lightgreen;
}
.ng-hide-remove {
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
HTML:
<h1>Switch the DIVs: <input type="checkbox" ng-model="myCheck"></h1>
<div id="div1" ng-hide="myCheck">Div 1</div>
<div id="div2" ng-hide="!myCheck">Div 2</div>
You don't need the transition on your div. See the forked fiddle here with the transition commented out.
JSFiddle
div {
// transition: all linear 0.5s;
}
Related
I have two divs side-by-side (inline block). Using Angular's ngAnimate, I want the left div to slide off the screen and the right div to slide over and take it's place.
Right now what happens is the left div slides away, and once that animation completes, the right div jumps over to take it's spot. How do I make it slide over smoothly at the same time?
Here's a Plunker which demonstrates it a lot better than I can explain it:
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk
Here's the css/html:
Css:
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all linear 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
left: -200px;
opacity: 0;
}
Html:
<div>
<button ng-click="hide = !hide">Toggle</button>
</div>
<div class="well">
<div ng-hide="hide" class="column" style="background-color: lightblue; height: 150px;">
</div>
<div class="column">
This column does not move smothly as the column to the left slides offscreen.
</div>
</div>
Here's that Plunker again, in case you scrolled to the bottom looking for the Plunker link :)
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk
You simply need to change the width of the column in your transition:
PLUNKR
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all ease-in-out 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
width: 0;
left: -200px;
opacity: 0;
}
The reason it wasn't working for you, is due to the fact that the width is remaining the same until the div becomes hidden. This prevents the right column from sliding over as the left column slides out of view. By setting the transition to adjust the width, you can give it that "sliding" effect along the right-edge.
I also changed the animation from linear to ease-in-out to give it a nicer transition
I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list?
My css:
.messages-active.messages {
max-height: 50px;
}
.messages {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background-color: AntiqueWhite;
overflow: hidden;
max-height: 0;
}
My index file (using Angular):
<body ng-app="app" ng-controller="TestCtrl as test">
<button ng-click="test.toggle = !test.toggle">Show messages</button>
(current: {{test.toggle}})
<div class="messages" ng-class="{ 'messages-active': test.toggle }" ng-repeat="message in test.messages">
{{message}} <a href ng-click="test.remove($index)">remove</a>
</div>
</body>
The idea is to set the height of container and add transition to the height.
$scope.styles.height = $scope.messages.length * 20 + 'px';
http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview
You can try following if it may help you.
On clicking remove instead removing element just add class messages-remove on it's parent div messages.
For e.g: It should become <div class="messages" to <div class="messages messages-remove".
Also add the following CSS in your style sheet.
.messages-active.messages-remove.messages,
.messages-remove.messages { max-height: 0px; }
Let me know if you have any question.
I have been trying to work out how to animate just a nested a view using ui-router. But all attempts have failed. What I am trying to do is just fade in the nested view called body I don't want to animate the header. I have made this example as small as possible. I recognize that if restructured my code to not be nested I would not have this issue but in production I need to have this nested.
here is my scss and html.
#mainView.ng-enter {
.nested-view-animate {
position: absolute;
left: 0;
right: 0;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-enter-active {
.nested-view-animate {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-leave {
.nested-view-animate {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
}
}
#mainView.ng-leave-active {
.nested-view-animate {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
}
This is my html
<div ui-view id="mainView">
<!-- below is what is included dynamically -->
<div>
<div ui-view="header"></div>
<!-- I want to animate when the content in here is loaded-->
<div ui-view="body" class="nested-view-animate"></div>
</div>
</div>
Again all I am trying to do is fade in new content into the "body" and fade out the old stuff.
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow
I have tried to modify it to get a seemless fade transition (transition: opacity 0.5s ease-in-out) from one div to the other, where both divs occupy the exact same position on the page, so that one div completely fades out before the other div begins to fade in.
In jquery, it would be as simple as:
$("#divA").fadeOut(function() { $("divB").fadeIn(); });
Does anyone have any advice on the best way to achieve this with angular, with respect to the linked example, which uses a single model "checked" to trigger the transition?
I used the example in ngShow to make the following jsfiddle based on angular1.2.0-rc.3.
The html code:
<div ng-app="App">
Click me: <input type="checkbox" ng-model="checked"><br/>
<div class="check-element animate-show" ng-show="checked">
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
<div class="check-element animate-show" ng-hide="checked">
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
The CSS styles
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
line-height:0;
opacity:0;
padding:0 10px;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.check-element {
padding:10px;
border:1px solid black;
background:white;
}
And finally the JavaScript code, don't forget to include the libraries angular.js and angular-animate.js
angular.module('App', ['ngAnimate']);
I hope it helps you ;)
Using the ngAnimate module, you can do this in pure CSS with the -transition-delay directive:
Plunker
HTML
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked">
<br/>
<img ng-show="checked" src="img1.jpg">
<img ng-hide="checked" src="img2.jpg">
</body>
CSS
img {
position: absolute;
}
.ng-hide-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.ng-hide-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
You can use ng-animate in conjuction with ng-show (http://docs.angularjs.org/api/ngAnimate), available from Angular 1.1.4. Or alternatively simply apply a show class when the model is ticked and apply your show and animation to the class.
<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>