web-dev-qa-db-ja.com

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をさまざまな要素に再利用できます。

csscss3angularjs
73
Tony Lâmpada

JQueryなしでslideToggle()を実行するAngularディレクティブを作成しました。

https://github.com/EricWVGG/AngularSlideables

86
Eric_WVGG

これは実際には非常に簡単です。あなたがしなければならないのは、CSSを変更することです。

これは非常に単純なフェードアニメーションのフィドルです。 http://jsfiddle.net/elthrasher/sNpjH/

スライドアニメーションにするには、最初に要素をボックス（スライドコンテナー）に入れてから、別の要素を追加して、残っている要素を置き換えます。それを取り出して、例はまだ動作します。

アニメーションのCSSを「フェード」から「スライド」に変更しましたが、これらは私が付けた名前です。そのために、「fade」という名前のスライドアニメーション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;
}

また、相対配置から絶対配置に変更しているため、一度に1つの要素だけがコンテナ内のスペースを占有します。

最終製品は次のとおりです。 http://jsfiddle.net/elthrasher/Uz2Dk/ 。お役に立てれば！

40
elthrasher

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

（ plunker ）

17
Amit Portnoy

これは、CSSクラス（非常に最小限のJS）で実際に実際に行うことができます。 ng-clickevent。原則として、height: 0;をheight: auto;にアニメートすることはできませんが、これはmax-heightプロパティをアニメートすることでだますことができます。 .foo-openが設定されている場合、コンテナはその「自動高さ」値に拡張されます-固定の高さや位置の必要はありません。

.foo {
    max-height: 0;
}

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

優れたLea Verouによるこのフィドル を参照

コメントで提起された懸念として、このアニメーションは線形イージングで完全に機能しますが、指数関数イージングは​​、アニメーションプロパティがheightではなくmax-heightであるという事実により、予想される動作とは異なる動作を生成することに注意してください自体;具体的には、max-heightのイージング曲線のheight部分のみが表示されます。

15
Luca

この質問に対する other answer のコードを放棄し、代わりにこの回答を使用することになりました。

これを行う最良の方法は、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);
                }
            });
        }
    }
});
8
steampowered

このクラスベースのJavaScriptアニメーションは、AngularJS 1.2（および1.4テスト済み）で動作します

Edit：最終的にこのコードを放棄し、まったく異なる方向に進みました。 私の他の回答の方がはるかに良い が好きです。この回答により、特定の状況でいくつかの問題が発生します。

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クラスに基づいて実装されます。

beforeRemoveClassメソッドに$(element).css({display:'none'})行を含める必要があります。jQueryアニメーションを開始する前に要素がdisplay: noneの状態にない限り、jQueryはslideDownを実行しないためです。 AngularJSはCSSを使用します

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

要素を非表示にします。 jQueryはこの状態を認識していないため、jQueryは最初のスライドダウンアニメーションの前にdisplay:noneを必要とします。

AngularJSアニメーションは、アニメーションの実行中に.ng-hide-animateクラスと.ng-animateクラスを追加します。

6
steampowered

これにはJavascriptアニメーションを使用する必要があります-要素の高さを知ることができないため、純粋なCSSでは不可能です。 javascriptアニメーションの実装に関する指示に従って、jQueryのソースからslideUpとslideDownをコピーします。

4
Andrew Joslin

あなたが言及したように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>
0
Blauhirn