1

我有以下html：

<div>
    <div data-ng-click="showContent()" data-ng-show="!visible" class="fly-in-group">{{heading}}</div>

    <div data-ng-show="visible" class="fly-in-group">
        <div data-ng-click="showHeadings()">Terug naar jaaroverzicht</div>
        <div data-ng-transclude></div>
    </div>
</div>

和CSS：

.fly-in-group{
   -webkit-transition:all 2s linear 0s;
    transition:all 2s linear 0s;

    position: relative;
    left: 0;
    line-height:15px;
    opacity:1;
    padding:10px;
}

.fly-in-group.ng-hide-add, 
.fly-in-group.ng-hide-remove{

    display: block !important;
}

.fly-in-group.ng-hide-add{
    position: relative;
    right: -9999px;
}

.fly-in-group.ng-hide-remove{
    position: relative;
    left: -9999px;
}

这是小提琴

我试图完成的是，当单击“某些标题”时，此 div 向左“滑出”，而另一个 div（带有项目）从右侧“滑入”。

我想使用 Angular + CSS3 来实现这一点，但我就是想不通。有人可以帮助我并解释它是如何工作的吗？

4

2 回答 2

0

CSS3 过渡取决于特定属性的变化。

当使用 ngHide 隐藏元素时，会将“ng-hide”类添加到元素中。因此，如果我们想让东西滑入和滑出，我们需要覆盖 .ng-hide 以便它改变我们感兴趣的属性。关键是我们还必须覆盖 .ng-hide 的 default display: none，否则会破坏过渡。

在这种情况下，不需要调整中间类 .ng-hide-add 和 .ng-hide-remove。

要通过最少的更改来解决问题，请将 CSS 更改为此（fiddle here）：

.fly-in-group{
    -webkit-transition:all 0.5s linear 0s;
    transition:all 0.5s linear 0s;

    position: absolute;
    left: 0;
    line-height:15px;
    opacity:1;
    padding:10px;
}

.fly-in-group.ng-hide {
    display: block !important;
    position: absolute;
    left: -999px;
}

我的一个警告是我将 .fly-in-group 的位置更改为绝对位置。我这样做是为了防止过渡期间出现烦人的闪烁。

于 2014-02-28T00:47:12.690 回答
0

我建议使用 css3 转换而不是使用“左”。我还更新了角度版本。

这是小提琴：

http://jsfiddle.net/fernandopasik/GcUjL/

.fly-in-group {
    -webkit-transition:all 0.2s linear 0s;
    -moz-transition:all 0.2s linear 0s;
    -o-transition:all 0.2s linear 0s;
    -ms-transition:all 0.2s linear 0s;
    transition:all 0.2s linear 0s;
    position: absolute;
    left: 0;
    cursor: pointer;
    line-height:15px;
    opacity:1;
    padding:10px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.fly-in-group.ng-hide {
    display: block !important;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
于 2014-03-16T18:34:26.060 回答