ng-show 및 ng-animate로 슬라이드 업 / 다운 효과

ng-show 및 ng-animate로 슬라이드 업 / 다운 효과

---

내가 사용하려고 해요 ng-animateJQuery와의 유사한 행동을 얻을 수 slideUp()및 slideDown(). 차라리 나만 사용하고 싶어ng-show

내가 여기 NG-애니메이션 튜토리얼 찾고 있어요 - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ,

제공된 예제에서 페이드 인 / 아웃 효과를 재현 할 수 있습니다.

슬라이드 업 / 다운 동작을 얻기 위해 CSS를 어떻게 변경할 수 있습니까? 또한 가능한 경우 CSS가 구성 요소 높이 (픽셀)를 모르는 것이 좋습니다. 그러면 다른 요소에 CSS를 재사용 할 수 있습니다.

---

slideToggle()jQuery없이 수행하는 Angular 지시문을 작성했습니다 .

https://github.com/EricWVGG/AngularSlideables

---

이것은 실제로 매우 쉽습니다. 당신이해야 할 일은 CSS를 변경하는 것입니다.

다음은 매우 간단한 페이드 애니메이션이있는 바이올린입니다. http://jsfiddle.net/elthrasher/sNpjH/

슬라이딩 애니메이션으로 만들려면 먼저 요소를 상자 (슬라이드 컨테이너)에 넣은 다음, 멋지게 보일 것이라고 생각했기 때문에 떠나는 요소를 대체하기 위해 다른 요소를 추가했습니다. 그것을 꺼내도 예제는 여전히 작동합니다.

애니메이션 CSS를 '페이드'에서 '슬라이드'로 변경했지만이 이름이 제가 지정한 이름입니다. 나는 '페이드'라는 이름의 슬라이드 애니메이션 CSS를 작성하거나 그 문제에 대해 다른 것을 작성할 수 있습니다.

중요한 부분은 CSS에있는 내용입니다. 다음은 원래 '페이드'CSS입니다.

.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);
                }
            });
        }
    }
});

---

이 클래스 기반 자바 스크립트 애니메이션은 AngularJS 1.2 (및 1.4 테스트 됨)에서 작동합니다.

Edit: I ended up abandoning this code and went a completely different direction. I like my other answer much better. This answer will give you some problems in certain situations.

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();}
    }
}

});

Simply add the .ng-hide-toggle-slidedown class to the container element, and the jQuery slide down behavior will be implemented based on the ng-hide class.

You must include the $(element).css({display:'none'}) line in the beforeRemoveClass method because jQuery will not execute a slideDown unless the element is in a state of display: none prior to starting the jQuery animation. AngularJS uses the CSS

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

to hide the element. jQuery is not aware of this state, and jQuery will need the display:none prior to the first slide down animation.

The AngularJS animation will add the .ng-hide-animate and .ng-animate classes while the animation is occuring.

---

You should use Javascript animations for this - it is not possible in pure CSS, because you can't know the height of any element. Follow the instructions it has for you about javascript animation implementation, and copy slideUp and slideDown from jQuery's source.

---

What's wrong with actually using ng-animate for ng-show as you mentioned?

<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>

참고URL : https://stackoverflow.com/questions/16677304/slide-up-down-effect-with-ng-show-and-ng-animate