Question

角度很新，只是习惯衍生物等。

管理构建一个基本的todo应用程序，但是当添加动画时（通过CSS到ng-enter / ng-eave类），动画的ng-repeat元素的大小在动画正在执行时显示为不正确的大小，不知道为什么会发生这种情况是否有些我做错了？

问题示例：

http://plnkr.co/edit/ZiiC3RQbmTL3vyRa6wBW?p=preview

<div ng-controller="TodoCtrl">
            <input type="text" placeholder="Filter" ng-model="filter">
            <!-- ADD ITEM FORM -->
            <form name="form" ng-submit="addtodo()">
                <input type="text"  name="newtodotitle" placeholder="Title" ng-model="newtodotitle" />
                <textarea  rows="10" placeholder="Note"  name="newtodo" ng-model="newtodo" />
                </textarea>
                <ul class="button-group">

添加

清除

                </ul>
            </form>
            <!-- /END FORM -->

            <!-- DISPAY LIST ITEMS -->
            <ul class="small-block-grid-1 medium-block-grid-3 ac-custom ac-checkbox ac-cross">
            <li  class="animate" ng-repeat="todo in todos | filter:filter ">
                <div class="panel">
                    <div class="row">

                    <div class="small-12 columns">
                    <h2 ng-class="{'done':todo.done}">{{todo.title}}</h2>
                    <p>{{todo.body}}</p>
                    </div>
                    </div>
                </div>
            </li>
        </ul>
            <!-- /END List ITEMS -->
        </div>



.animate.ng-enter
{ 
    -webkit-animation: bounceIn 1s;
    -moz-animation: bounceIn 1s;
    -ms-animation: bounceIn 1s;
    animation: bounceIn 1s;
} 

.animate.ng-leave {
    -webkit-animation: bounceOut 1s;
    -moz-animation: bounceOut 1s;
    -ms-animation: bounceOut 1s;
    animation: bounceOut 1s;
}

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
    opacity: 1;
    width: 150px;
    height: 30px;
}

非常感谢！

Answer 1

刚刚注意到这是一个简单的CSS问题，我的错误是懒惰。（删除像素值）

Ng Animate初始大小不正确

1 个答案: