Angularjs Ng动画初始大小不正确

对角度非常陌生，只是习惯了导数等

设法构建了一个基本的todo应用程序，但在添加动画（通过CSS添加到ng enter/ng eave classes）时，动画中的ng repeat元素的大小在动画执行时显示为不正确的大小，不确定为什么会发生这种情况，我是否做错了什么

问题示例：

添加

清除

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

{{todo.title}
{{todo.body}



。设置动画。ng-enter
{ 
-webkit动画：弹跳1秒；
-moz动画：弹跳1秒；
-ms动画：反弹1秒；
动画：弹跳1秒；
} 
.动画制作ng-LEFT{
-webkit动画：反弹1s；
-moz动画：反弹1s；
-ms动画：反弹1s；
动画：反弹1s；
}
.animate.ng-leave.animate.ng-leave-active，
。设置动画。ng-enter{
不透明度：0；
宽度：0px；
高度：0px；
}
.设置动画。ng-enter.ng-enter-active，
.动画制作ng-LEFT{
不透明度：1；
宽度：150px；
高度：30px；
}

---

非常感谢

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

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