74

JQueryや. ng-animate_ 私だけが使いたいslideUp()slideDown()ng-show

ここで ng-animate チュートリアルを見ています - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html、

提供された例でフェードイン/アウト効果を再現できます。

css を変更してスライドアップ/ダウンの動作を取得するにはどうすればよいですか? また、可能であれば、css がコンポーネントの高さ (ピクセル単位) を認識しない方がよいでしょう。そうすれば、CSS をさまざまな要素に再利用できます。

4

8 に答える 8

40

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

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

スライド アニメーションにするには、最初に要素をボックス (スライド コンテナー) に配置する必要があり、次に別の要素を追加して、見栄えが良いと思ったという理由だけで、離れていた要素を置き換えました。それを取り出しても、例は引き続き機能します。

アニメーション css を「fade」から「slide」に変更しましたが、これらは私が付けた名前であることに注意してください。'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/ . お役に立てれば！

于 2013-06-03T12:41:17.130 に答える
8

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

これを行う最善の方法は、ng-showandng-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);
                }
            });
        }
    }
});
于 2015-08-20T19:05:33.737 に答える