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.
Related
I am building an Angular application that uses uib-typeahead and I am having trouble using the loading attribute. I would like to show a spinner while the typeahead is searching through a large dataset. Here is my code:
<input id="value"
class="form-control input-sm" type="text"
ng-model="filter"
uib-typeahead="option.value for option in values | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-loading="is_Loading"
typeahead-min-length="0"
typeahead-editable="true">
<span ng-if="is_Loading" id="myDiv"><img src="lib/images/ajax-spinner-large.gif" class="ajax-loader"/></span>
No image is showing when I am typing in the text box. Should I be assigning a $scope variable to is_Loading?
Handle it using ng-style
Try this
<!DOCTYPE html>
<html lang="en" ng-app="filterApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style type="text/css">
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<body ng-controller="tableController">
<button ng-show="showLoading" ng-click="changeLoading()"> hide Loading</button>
<button ng-show="!showLoading" ng-click="changeLoading()">show Loading</button>
<div class="loader" ng-style={display:loaderStyle}></div>
<script>
var app = angular.module('filterApp',[]);
app.controller('tableController',function($scope){
$scope.showLoading = true;
$scope.loaderStyle = 'block';
$scope.changeLoading = function(){
$scope.showLoading = !$scope.showLoading;
if ($scope.showLoading) {
$scope.loaderStyle = 'block';
}else{
$scope.loaderStyle = 'none';
}
}
});
</script>
</body>
</html>
You can keep small span with image at bottom of your typeahead (or wherever you want) and add class ng-show="loader" then create $scope.loader and when you hit request make it true and on success make $scope.loader = false.
I'm looking to implement the following pieces of code into my angular boiler plate. I'm a bit new to the framework, so some patience is appreciated!
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp">
<bars data="40,4,55,15,16,33,52,20"></bars>
</div>
.chart {
background: #eee;
padding: 3px;
}
.chart div {
width: 0;
transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 5px;
color: white;
box-shadow: 2px 2px 2px #666;
}
angular.module('myApp', []).
directive('bars', function ($parse) {
return {
restrict: 'E',
replace: true,
template: '<div id="chart"></div>',
link: function (scope, element, attrs) {
var data = attrs.data.split(','),
chart = d3.select('#chart')
.append("div").attr("class", "chart")
.selectAll('div')
.data(data).enter()
.append("div")
.transition().ease("elastic")
.style("width", function(d) { return d + "%"; })
.text(function(d) { return d + "%"; });
}
};
});
Which are the HTML, CSS and JS code excerpts for the graph only. I'm looking to implement this into my code, which is easy enough for the HTML/CSS (I've added a new div and style sheet in my header of my index.html).
I'm wondering how I would go about adding the JS bit of code to my app.js. My existing code already lists several modules, but no var app = angular.module('myApp', ['zingchart-angularjs']); type statement.
When I simply copy my code above in, I don't see any graph appear on my webpage.
Any help appreciated - thanks!
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 have a list of items (divs) and when I click on any of them I need them to move (with animation) to the top of the list.
However, move animation is not working for me.
HTML code:
<body ng-controller="myCtrl">
<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
<div data-ng-repeat="item in items track by $index"
ng-click="move2Top($index)"
class="my-repeat-animation boxy">
{{item}}
</div>
</div>
</body>
Javascript controller (contains an Array prototype method for pushing array element to top of array)
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.moveToTop(idx);
};
Array.prototype.moveToTop = function(from) {
this.splice(0, 0, this.splice(from, 1)[0]);
};
});
And the CSS:
.my-repeat-animation.ng-enter,
.my-repeat-animation.ng-leave,
.my-repeat-animation.ng-move {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
}
.my-repeat-animation.ng-enter {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-move {
opacity:0.5;
}
.my-repeat-animation.ng-move.ng-move-active {
opacity:1;
}
.boxy {
border: solid 1px;
margin: 3px;
padding: 3px;
border-radius: 4px;
width: 30px;
text-align: center;
}
Please take a look at the example:
http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview
Animated move simply doesn't work.
Maybe you can refer to this question on stack. This is possibly similar what you are trying to achieve.
Animating ng-move in AngularJS ngRepeat is animating the wrong items
It is not complete but it might give you some idea or lead you in right direction.
I think that this has to do with your Array.prototype function.
If you do the splicing in $scope.move2Top it works, at least in my example.
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.splice(0, 0, $scope.items.splice(idx, 1)[0]);
};
});
http://plnkr.co/edit/H5UpIZoqIMnJofz0mndL?p=preview
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