javascript - Hiding opacity of content with angular with -
i'm trying hide 3 bicycles when click left arrow can transition next 3 bicycles app.js products object. tried ng-hide, makes them disappear causing 2 arrows snap next each other in screenshot below. if hide opacity, stay , can change images while invisible. can me this?
html
<!doctype html> <html ng-app='formapp'> <head> <title>bicycle app</title> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link href="app.css" rel="stylesheet"> </head> <body> <div class="header"> <div class="container"> <div class='row'> <div class='col-md-12'> <i class="fa fa-bicycle" aria-hidden="true"><span> {{"bike shop"}}</span></i> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <!-- end class not needed --> <div class="choosetitle"> choose bicycle </div> </div> </div> <!-- missed md offset, end class not needed --> <div class="products" ng-controller="bikecontroller"> <div class="row"> <div ng-repeat="product in products | limitto:-3"> <div class="col-md-1" id="leftarrow" ng-click="leftarrowclick($index)"><a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a></div> <div class="bikesandtitles"> <div id="biketitle" class="col-md-3 text-center" ng-style="{ 'translucent': $index !== selectedindex }"> {{product.manufacturer}} <img id="bikepic" ng-src="{{product.image}}" ng-style="{ 'translucent': $index !== selectedindex }"> </div> </div> </div><!-- end ng-repeat products --> <div class="col-md-1" id="rightarrow"><a ng-href="#" ><img ng-src="images/rightarrow.png" class="img-responsive"></a></div> </div> </div><!--end controller--> </div> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bikeimageslider.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> </body> </html> app.js
var app = angular.module('formapp', ['nganimate']); app.controller('bikecontroller',['$scope', function($scope){ $scope.bikeslide = false; $scope.leftarrowclick = function(index){ $scope.selectedindex = index; }; $scope.products = [ { manufacturer: "trek", image: 'images/bike1.jpg' }, { manufacturer: "mongoose", image: 'images/bike2.jpg' }, { manufacturer: "portlandia", image: 'images/bike3.jpg' }, { manufacturer: "giant", image: 'images/bike4.jpg' }, { manufacturer: "framed", image: 'images/bike5.jpg' }, { manufacturer: "windsor", image: 'images/bike6.jpg' } ]; this.form = {}; this.addform = function(product){ }; }]); app.css
.header{ font-style:italic; background-color:black; height:60px; color:white; font-weight:bold; font-size:40px; } .header .fa {font-style:italic; } .bikeselector{ color:green; } .choosetitle{ font-size:60px; } .products{ color: #1e90ff ; text-align:center; font-size:40px; } #bikepic{ height:100%; width:100%; } #leftarrow, #rightarrow{ width:120px; } .translucent { opacity: 0.5 }
you can temporarily hide content visibility:hidden. so
<div ng-class="{ hidden: istransitioning }" ..>...</div> .hidden { visibility: hidden; } and in onclick handler of arrows can place.
scope.istransitioning = true; and after transition done can reset value
scope.istransitioning = false;
Comments
Post a Comment