AngularJS 的不同转换 [英] Different transitions with AngularJS

问题描述

如何使用 AngularJS 启用不同的转换.可以说，我的 Web 应用程序中有一个侧边栏.我用户点击了一个按钮 X，侧边栏应该很快消失，如果用户点击另一个按钮，侧边栏应该很慢地消失.

我认为，这可以通过在其中一次单击后设置转换选项值然后更改侧边栏的可见性状态(由转换指令监视)来实现.

但这对我来说似乎有点糟糕.有没有通用的方法来做到这一点?

解决方案

我会做这样的事情.为侧边栏设置默认过渡，然后应用具有不同过渡速度的类.

这是我的意思的jsFiddle:

http://jsfiddle.net/rd13/eTTZj/149/

HTML:

<div class="sidebar" ng-class="{'slide-out':boolChangeClass}">侧边栏
<button ng-click="click()">切换侧边栏</button>

角度:

function myCtrl($scope) {$scope.click = function() {$scope.boolChangeClass = !$scope.boolChangeClass;$scope.$apply();}}

CSS:

.sidebar {-moz-transition: 左 .1s;-webkit-transition: 左 .1s;-o-transition: 左 .1s;过渡:左 .1 秒；宽度:100px；背景颜色:蓝色；位置:绝对；顶部:0px；底部:0px；左:-100px；}.滑出 {-moz-transition: 左 1s;-webkit-transition: 左 1s;-o-transition: 左 1s;过渡:左1s；左:0px；}

How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow.

I think, this would work by setting a transition option value after one of that clicks and then changing the visibility state of the sidebar (watched by the transition directive).

But that seems a bit like bad style for me. Is there a common way to do this?

解决方案

I would do something like this. Set a default transition for the sidebar, and then apply a class with a different transition speed.

Here is a jsFiddle of what I mean:

http://jsfiddle.net/rd13/eTTZj/149/

HTML:

<div ng-controller="myCtrl">
    <div class="sidebar" ng-class="{'slide-out':boolChangeClass}">
        Sidebar
    </div>
    <button ng-click="click()">Toggle Sidebar</button>
</div>

Angular:

function myCtrl($scope) {
    $scope.click = function() {
        $scope.boolChangeClass = !$scope.boolChangeClass;
        $scope.$apply();
    }
}

CSS:

.sidebar {
    -moz-transition: left .1s;
    -webkit-transition: left .1s;
    -o-transition: left .1s;
    transition: left .1s;
    width: 100px;
    background-color: blue;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -100px;
}

.slide-out {
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
    left: 0px;

}

这篇关于AngularJS 的不同转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！