diff --git a/README.md b/README.md index 0c0af6d..9c93f90 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,37 @@ angular.module('demoApp', ['weeklyScheduler', 'weeklySchedulerI18N']) }]) ``` +### Animation + +You can add animation to the weekly scheduler directive easily by importing angular module `ngAnimate`. +Your application could for instance use : + +```javascript +angular.module('demoApp', ['ngAnimate', 'weeklyScheduler']) +``` + +Don't forget to add the angular-animate javascript file to your Single Page App `index.html`. + +``` + +``` + +Styling can be changed to whatever you like. This is an example of fading-in items entering the DOM : + +```css +.schedule-animate { + transition: opacity 200ms ease-out; +} +.schedule-animate.ng-enter, .schedule-animate.ng-hide-remove { + opacity: 0; +} +.schedule-animate.ng-leave, .schedule-animate.ng-hide-add { + display: none; + opacity: 1; +} +``` + +You should see your scheduler items fading in! ## License Released under the MIT License. See the [LICENSE][license] file for further details. diff --git a/dist/js/ng-weekly-scheduler.js b/dist/js/ng-weekly-scheduler.js index c67ce68..101bbbf 100644 --- a/dist/js/ng-weekly-scheduler.js +++ b/dist/js/ng-weekly-scheduler.js @@ -718,7 +718,7 @@ angular.module('ng-weekly-scheduler/views/multi-slider.html', []).run(['$templat angular.module('ng-weekly-scheduler/views/weekly-scheduler.html', []).run(['$templateCache', function($templateCache) { $templateCache.put('ng-weekly-scheduler/views/weekly-scheduler.html', - '
{{schedulerCtrl.config.labels.month || \'Month\'}}
{{schedulerCtrl.config.labels.weekNb || \'Week number\'}}
'); + '
{{schedulerCtrl.config.labels.month || \'Month\'}}
{{schedulerCtrl.config.labels.weekNb || \'Week number\'}}
'); }]); angular.module('ng-weekly-scheduler/views/weekly-slot.html', []).run(['$templateCache', function($templateCache) {