Просуньте ефект вгору / вниз за допомогою ng-show та ng-animate

Я намагаюся використовувати, ng-animateщоб отримати поведінку, подібну до JQuery slideUp()та slideDown(). Тільки я волів би скористатисяng-show

Я переглядаю підручник з ng-animate тут - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ,

і я можу відтворити ефект затухання / виходу у наведеному прикладі.

Як я можу змінити CSS, щоб отримати поведінку слайд вгору / вниз? Крім того, якщо це можливо, краще, щоб css не знав про висоту компонента в пікселях. Таким чином я можу повторно використовувати css для різних елементів.

Я написав директиву Angular, яка обходиться slideToggle()без jQuery.

https://github.com/EricWVGG/AngularSlideables

Це насправді досить просто зробити. Все, що вам потрібно зробити, це змінити css.

Ось скрипка з дуже простою анімацією затухання: http://jsfiddle.net/elthrasher/sNpjH/

Щоб перетворити його на ковзну анімацію, мені спочатку довелося помістити свій елемент у вікно (це слайд-контейнер), потім я додав інший елемент, щоб замінити той, що залишався, лише тому, що я думав, що це буде виглядати гарно. Дістаньте, і приклад все одно буде працювати.

Я змінив css анімації з "зникати" на "слайд", але зауважте, що це я назвав. Я міг би написати слайд-анімацію css з назвою 'зникати' або щось інше з цього приводу.

Важливою є те, що в CSS. Ось оригінальний cade:

.fade-hide, .fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
    opacity:1;
}
.fade-hide.fade-hide-active {
    opacity:0;
}
.fade-show {
    opacity:0;
}
.fade-show.fade-show-active {
    opacity:1;
}

Цей код змінює непрозорість елемента з 0 (повністю прозорий) на 1 (повністю непрозорий) і назад. Рішення полягає в тому, щоб залишити непрозорість наодинці і замість цього змінити верхню (або ліву, якщо ви хочете рухатись ліворуч-праворуч).

.slide-hide, .slide-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.slide-hide {
    position: relative;
    top: 0;
}
.slide-hide.slide-hide-active {
    position: absolute;
    top: -100px;
}
.slide-show {
    position: absolute;
    top: 100px;
}
.slide-show.slide-show-active {
    position: relative;
    top: 0px;
}

Я також переходжу з відносного на абсолютне позиціонування, тому лише один із елементів займає місце в контейнері одночасно.

Ось готовий продукт: http://jsfiddle.net/elthrasher/Uz2Dk/ . Сподіваюся, це допомагає!

оновлення для Angular 1.2+ (v1.2.6 на момент цієї публікації):

.stuff-to-show {
  position: relative;
  height: 100px;
  -webkit-transition: top linear 1.5s;
  transition: top linear 1.5s;
  top: 0;
}
.stuff-to-show.ng-hide {
  top: -100px;
}
.stuff-to-show.ng-hide-add,
.stuff-to-show.ng-hide-remove {
  display: block!important;
}

( плунжер )

Це насправді можна зробити в CSS і дуже мінімальному JS, просто додавши клас CSS (не встановлюйте стилі безпосередньо в JS!), Наприклад, ng-clickподією. Принцип полягає в тому, що один не може оживити height: 0;до , height: auto;але це може бути обдурять анімувати max-heightвластивість. Контейнер розшириться до значення "автовисота", коли .foo-openвстановлено - не потрібно фіксованої висоти або позиціонування.

.foo {
    max-height: 0;
}

.foo--open {
    max-height: 1000px; /* some arbitrary big value */
    transition: ...
}

дивись цю скрипку чудової Леа Веру

В якості занепокоєння, піднятого в коментарях, зауважте, що, хоча ця анімація чудово працює з лінійним послабленням, будь-яке експоненціальне послаблення призведе до поведінки, відмінної від того, що можна було очікувати - через те, що анімована властивість є, max-heightа не heightсама; зокрема, буде відображатися лише heightчастка кривої послаблення max-height.

У підсумку я відмовився від коду для своєї іншої відповіді на це питання і замість цього пішов із цією відповіддю.

Я вважаю , що найкращий спосіб зробити це , щоб не використовувати ng-showі ng-animateвзагалі.

/* Executes jQuery slideDown and slideUp based on value of toggle-slidedown 
   attribute.  Set duration using slidedown-duration attribute.  Add the 
   toggle-required attribute to all contained form controls which are
   input, select, or textarea.  Defaults to hidden (up) if not specified
   in slidedown-init attribute.  */
fboApp.directive('toggleSlidedown', function(){
    return {
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {
            if ('down' == attrs.slidedownInit){
                elem.css('display', '');
            } else {
                elem.css('display', 'none');
            }
            scope.$watch(attrs.toggleSlidedown, function (val) {
                var duration = _.isUndefined(attrs.slidedownDuration) ? 150 : attrs.slidedownDuration;
                if (val) {
                    elem.slideDown(duration);
                } else {
                    elem.slideUp(duration);
                }
            });
        }
    }
});

Ця анімація JavaScript на основі класу працює в AngularJS 1.2 (і протестовано 1.4)

Редагувати : Я в підсумку відмовився від цього коду і пішов зовсім в іншому напрямку. Інша моя відповідь мені подобається набагато більше . Ця відповідь дасть вам деякі проблеми в певних ситуаціях.

myApp.animation('.ng-show-toggle-slidedown', function(){
  return {
    beforeAddClass : function(element, className, done){
        if (className == 'ng-hide'){
            $(element).slideUp({duration: 400}, done);
        } else {done();}
    },
    beforeRemoveClass :  function(element, className, done){
        if (className == 'ng-hide'){
            $(element).css({display:'none'});
            $(element).slideDown({duration: 400}, done);
        } else {done();}
    }
}

});

Просто додайте .ng-hide-toggle-slidedownклас до елемента-контейнера, і поведінка слайдів jQuery буде реалізовано на основі класу ng-hide.

Ви повинні включити $(element).css({display:'none'}) рядок у beforeRemoveClassметод, оскільки jQuery не буде виконувати slideDown, якщо елемент не знаходиться в стані display: noneдо початку анімації jQuery. AngularJS використовує CSS

.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

щоб приховати елемент. jQuery не знає цього стану, і jQuery потребуватиме display:noneперед першою анімацією слайда.

Анімація AngularJS додаватиме класи .ng-hide-animateі, .ng-animateпоки відбувається анімація.

Для цього слід використовувати анімацію Javascript - це неможливо в чистому CSS, оскільки ви не можете знати висоту будь-якого елемента. Дотримуйтесь інструкцій щодо реалізації анімації javascript та скопіюйте slideUp та slideDown із джерела jQuery.

Що поганого в тому, щоб насправді використовувати ng-animateдля, ng-showяк ви вже згадували?

<script src="lib/angulr.js"></script>
<script src="lib/angulr_animate.js"></script>
<script>
    var app=angular.module('ang_app', ['ngAnimate']);
    app.controller('ang_control01_main', function($scope) {

    });
</script>
<style>
    #myDiv {
        transition: .5s;
        background-color: lightblue;
        height: 100px;
    }
    #myDiv.ng-hide {
        height: 0;
    }
</style>
<body ng-app="ang_app" ng-controller="ang_control01_main">
    <input type="checkbox" ng-model="myCheck">
    <div id="myDiv" ng-show="myCheck"></div>
</body>