I can't get animations to work for ng-show only.
This works to fade out and fade in:
.animate-show {
display: block !important;
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.animate-show.ng-hide {
opacity:0;
}
<div ng-show="match.userId" style="margin-right: auto; margin-left: auto;" class="padding animate-show ng-hide">
...
</div>
I want to fade IN only.... no animation on hide. This doesn't work
.animate-show {
display: block !important;
}
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.animate-show.ng-hide {
opacity:0;
}
Here's a plunkr:
http://plnkr.co/edit/9KNqt5TAZ8Ejy8eeJUQs
.animate-show.ng-hide-remove.ng-hide-remove-active {
ng-hide-remove-active is too late, you only need ng-hide-remove.
Working plunker
Related
Heyo, I am trying to make a div containing a google chart slide up and down when clicked. I can get the actual divs containing the chart to animate, but the chart itself won't respond. I have a suspicion it is because there is so much html that gets injected by the google charts object, but I'm not sure how to fix it. Apologies ahead of time if the question is poorly formatted, this is my first foray into Stack Overflow. Here is what my code looks like, the Google chart is getting injected into the elevation-chart div:
HTML:
<div class="leftContent" ng-controller="ElevationProfileController as Elevation" >
<div class="chart-slide" ng-click="Elevation.slide()" ng-show="Elevation.show">
<div id="elevation-chart" ng-show="Elevation.show" ></div>
</div>
JS:
angular.module('appName').controller('ElevationProfileController', function(){
this.show = true;
this.slide = function(){
this.show = !this.show;
}
})
CSS:
.chart-slide.ng-hide-add,
.chart-slide.ng-hide-remove {
display:block!important;
}
.chart-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 15%;
}
.chart-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 5%;
}
.chart-slide{
height: 15%;
width: 100%;
border: 5px solid black;
}
.chart-slide.ng-hide {
height:5%;
display:block!important;
}
#elevation-chart {
width: 90%;
height: 100%;
border: 2px solid orange;
}
#elevation-chart.ng-hide-add,
#elevation-chart.ng-hide-remove {
display:block!important;
}
#elevation-chart.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
transition: .3s linear all;
height: 100%;
}
#elevation-chart.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
transition: .3s linear all;
height: 0%;
}
I am not sure how this behaves in this case, but i am sure that you need use $scope.
You have to inject a scope in controller and you will can manage your view.
angular.module('appName').controller('ElevationProfileController', function($scope){
$scope.show = true;
$scope.slide = function(){
$scope.show = false;
}
})
Check the documentation here
I am using flexslider but i don't necessarily know if this is a flexslider problem or just to do with how I have positioned the contents of each slide.
Basically, I have a left block of text, and a right hand side image on each slide... when this responds to mobile devices, I stack them vertically using absolute positioning.
This seems to work file when previewed on desktop, however when I load it on my iphone, or on Safari, the contents of each slide disappear.
I cant for the life of me figure out why this is, as it seems fine on chrome.
To view the site, click below:
toddpadwick.co.uk/main-index.html
Can any one help? im really struggling here!
the contents of each slide are as follows: (i have simplified it for the purpose of this post)
<ul class="slides">
<li><!-- slide-->
<div class="caption"><!-- THIS IS THE LEFT SIDE TEXT BOX -->
<div class="title">
lorum ipsum dolar sit amet
</div><!-- END TITLE -->
</div><!-- END CAPTION -->
<div class="teaser"><!-- THIS IS THE RIGHT HAND SIDE IMAGE -->
<div class="image" style="background-image:url(teasers/image.png);"></div>
</div><!-- END TEASER -->
</li><!-- end slide-->
</ul><!-- END SLIDES-->
and here is CSS
.flexslider .slides, .flexslider .slides > li {
height: 100%;
}
.flexslider .slides li {
height:100%;
position: relative;
}
.slides li .caption {
-webkit-transition: all 0.3s ease-out 0.7s;
transition:all 0.3s ease-out 0.7s;
height:100%;
left:0;
width:40%;
opacity:0.4;
display: table;
float: left;
}
.slides li.flex-active-slide .caption {
opacity:1;
}
.slides li .caption .title {
vertical-align: middle;
display: table-cell;
width: 100%;
padding-left:100px;
}
.slides li .teaser {
-webkit-transition: all 0.3s ease-in 0.6s;
transition:all 0.3s ease-in 0.6s;
width:60%;
height:90%;
right:0;
top:0;
display:table;
padding:20px 60px 40px 20px;
position: absolute;
}
.slides li .teaser .image {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: table-cell;
vertical-align: middle;
}
toddpadwick.co.uk/main-index.html
i'm trying to build animated vertical panel which suppose to be hidden
and when user clicks button -panel should slide from the right.
here is my code:
HTML :
<body ng-controller="Ctrll">
<p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>
<button ng-click="showAlerts()" style="float:left">
click to toggle panel
</button>
<!--sliding panel directive-->
<alerts-center></alerts-center>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="js/index.js"></script>
</body>
CSS:
body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#FFF;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}
.animate-slide {
background:#30373f;
position:absolute;
width: 320px;
height:100%;
top: 0;
right:0px;
}
.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
display:none;
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
}
.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-left;
animation:0.5s slide-left;
}
.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-right;
animation:0.5s slide-right;
}
.animate-slide.ng-hide {
right:-320px;
display:none;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slide-left
{
0% {right:-320px;}
100% {right:0;}
}
/* Standard syntax */
#keyframes slide-left
{
0% {right:-320px;}
100% {right:0;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slide-right
{
0% {right:0;}
100% {right:-320px;}
}
/* Standard syntax */
#keyframes slide-right
{
0% {right:0;}
100% {right:-320px;}
}
JS:
angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.showAlerts = function($event) {
$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.html',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});
The problem:
when loading the sliding panel is visible for a second and then hides
(demonstration)
Will appreciate any advise
You can use jQuery's slideUp or try a custom Angular directive like AngularSlideables. But you can also use straight CSS with Angular's ngAnimate module as follows:
.panelAnimate {
transition: all 5s linear;
-moz-transition: all 5s linear; /* Firefox 4 */
-webkit-transition: all 5s linear; /* Safari and Chrome */
-o-transition: all 5s linear; /* Opera */
-ms-transition: all 5s linear; /* Explorer 10 */
}
.panelAnimate.ng-hide {
opacity: 0;
}
Then simply define your panel:
<div class="panel panel-primary panelAnimate">...</div>
In your specific case, you would likely use CSS's animate rather than the transition I used above.
I'm having a really hard time understanding ngAnimate.
HTML:
<body ng-init="hide=false">
<button ng-click="hide=!hide">Toggle</button>
<div class="item" ng-hide="hide">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</body>
CSS:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.item {
padding: 40px;
background: orange;
margin-bottom: 50px;
transition: all linear 3s;
}
.item:hover {
background: red;
}
.item.ng-hide-add {
background: red;
}
Example: http://plnkr.co/edit/rixKjjvy4TUiu1r3MSFm?p=preview
The hover transition works fine, but the ng-hide-add doesn't animate at all.
I am developing a angular app where i am using animation in ng-show attribute on button click to show and hide a div element .It works fine in the hide case but it does not work fine in show case it immediately shows the element without the animation.You can see the same behavior in the example
:http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide .
My Code is
<div class="row-fluid">
<button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
</div>
<div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
</div>
and css is
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}
.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}
I refactored it a bit, and it seems to be working with this setup:
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show.example-show-active,
.example-hide {
opacity:1;
}
.example-hide.example-hide-active,
.example-show {
opacity:0;
}
Not sure why it makes a difference.