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 変換を使用することをお勧めします。angularバージョンも更新しました。

フィドルは次のとおりです。

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 に答える