Question

我有以下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;
}

这是Fiddle

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

我想使用Angular + CSS3完成此操作，但我无法理解。有人可以帮助我并解释它是如何工作的吗？

Answer 1

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

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

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

要使用最低要求的更改来解决问题，请将CSS更改为此（fiddle here）：

display: none

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

Answer 2

我建议使用css3转换而不是使用＆＃34; left＆＃34;。我还更新了角度版本。

这是小提琴：

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

如何使用Angular创建幻灯片效果？

2 个答案: