Something like Bootstrap folded using angular

Question

I am creating a small application and I am using AngularJS. Inside the application, I need a collapsible element, and using Twitter Bootstrap will be as simple as adding a library and some tags to my target element and trigger.

But I try not to load other external libraries like bootstrap or any other, so I tried to achieve the same behavior with Angular:

$scope.collapse = function(target) { var that = angular.element(document).find(target), transitioned = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd otransitionend', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, _transitioned = transitioned[ Modernizr.prefixed('transition') ], height = that.outerHeight(true); if (angular.element(that).hasClass("in")) { that.height(0); } else { that.height(height); }; that.on(_transitioned, function() { that.toggleClass("in"); }); }; 

As you can see, I'm trying to move the height (since the element has a transition to height), and in the end just add the in class. But this is not very good, because if I listen at the end of the transition, it will start at either end of the transition inside this element.

I need help with this, how can I rewrite bootstrap legible only with Angular? I don’t need events that boot files have on shown , hidden or show , hide , I just need to trigger a simple element collapse with a transition and keep the dynamic elements at the level (I don’t need a fixed height, otherwise I would just use CSS for crash achievement). I just have to be determined in the right direction :)

Answer 1

Looks like you just want to collapse something with CSS3 transitions?

Well, you can do it, but the controller is the wrong place for this. You must do this using directives or in a custom directive. Fortunately, you can do this with native Angular directives such as ng-class.

HTML:

 <button ng-click="open = !open">Toggle</button> <div ng-class="{ showMe: open }" class="collapsable"> <h3>This should collapse</h3> </div> 

And most importantly, your CSS:

  .collapsable { display: inline-block; overflow: hidden; height: 0; transition: height 1s; -webkit-transition: height 1s; -moz-transition: height 1s; -o-transition: height 1s; } .collapsable.showMe { height: 100px; } 

And the pluker is working.

It is important to note that CSS3 transitions will not work in all browsers. Especially in IE. In the end, I think you will probably be better off using a plugin that someone else has already done, and then using it in a custom directive that looked at some boolean value.

I hope this helps.

---

EDIT

height: auto does not work with CSS transitions (at least at the time of publication). So that’s why you really want to use another user’s plugin rather than reinvent the wheel. Even if it's just a jQuery animate () method. The pseudoex code for wrapping your own directive would be something like this: (assuming you're using jQuery)

 app.directive('collapseWhen', function () { return function(scope, elem, attr) { scope.$watch(attr.collapseWhen, function(val) { var clone = elem.clone().appendTo('body'); var h = clone.height(); clone.remove(); scope.animate({ height: (val ? h : 0) + 'px' }, 1000); } } }); 

and then you will use it like:

 <button ng-click="foo = !foo">Toggle</button> <div collapse-when="foo"> 

Again, the psuedo code above, I have no idea whether this will work or not, it's just to give you the idea to follow if you really want to quit your own.

Answer 2

If I understand the questions, my solution is to use angular $ animateCss. There are documents and examples here https://docs.angularjs.org/api/ngAnimate/service/ $ animateCss

Using the $ animateCss service, you can create your own animations using ngAnimate. This is an example of an angular module. The demo is in the link below

 var AppModule = angular.module('myApp', ['ngAnimate']) .controller('collapseCtrl', ['$scope', function($scope) { $scope.btn1 = $scope.btn2 = $scope.btn3 = false; }]).animation('.my-collapse', ['$animateCss', function($animateCss) { return { enter: function(element, doneFn) { var height = element[0].offsetHeight; return $animateCss(element, { from: { height: '0px', overflow: 'hidden' }, to: { height: height + 'px' }, cleanupStyles: true, duration: 0.3 // one second }); }, leave: function(element, doneFn) { var height = element[0].offsetHeight; return $animateCss(element, { to: { height: '0px', overflow: 'hidden' }, from: { height: height + 'px' }, cleanupStyles: true, duration: 0.3 // one second }); } }; }]); 

https://plnkr.co/edit/DjU1A2vmiBB1dYXjkiN1

Answer 3

Roland, see the Bootstrap project from angular -ui team.