Question

我试图将ngAnimate添加到我的代码中，但它不起作用......而且我完全迷失了。我希望在页脚的两个标签之间。因此页面从选项卡1开始，当您单击选项卡2时，我想用动画显示内容。谁能帮我？？（我已经将脚本源angularJs和动画脚本链接在我的身体顶部

so the first two sentences are: 
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-animate.min.js"</script>

但那不是问题......）

html: 
<div id="container" ng-controller="todoCtrl">

<!-- de controller die de gemaakt todo's weergeeft in de eerste tab -->
<div ng-show="tab === 1">
        <ul class="dots">
            <li ng-repeat="todo in todos | orderBy:'date':true">
                <input type="checkbox" ng-model="todo.done" />
                <span> {{todo.date | date: 'fullDate'}} <br> </span>
                <span ng-class="{'done':todo.done}">{{todo.title}} <br><br></span>
            </li>
        </ul><br>
    <button ng-click="clearCompleted()">Clear post</button>
</div>
<!-- tweede controller die het getypte submit naar het overzicht -->
<div ng-show="tab === 2">
    <p> Write to me: </p>
    <form name="frm" ng-submit="addTodo()">
        <textarea rows="20" cols="100" placeholder="Today was..." name="newTodo" ng-model="newTodo" required > </textarea><br><br>
        <button class="btn" ng-disabled="frm.$invalid">Enter post</button>
    </form>
    <br>
</div>
</div>
<footer>
    <section ng-init="tab = 1">
        <ul class="nav">
            <li> <a href ng-click="tab = 1"> Summary </a> </li>
            <li> <a href ng-click="tab = 2"> Add Diary post </a> </li>
        </ul>
    </section> 
</footer>


Javascript: 
    <script> 
<!-- hier maak je de module aan voor angular en aciveer je in de html tag --> 
    angular.module('To_Do',['storageService', 'ngAnimate']).
    <!-- controleren of de todos kloppen -->
    controller('todoCtrl',['$scope','getLocalStorage', function($scope, getLocalStorage){
        $scope.todos = getLocalStorage.getTodos();
        [
        <!--        {'title' : 'Build a todo app', date: $scope.today, 'done':false} -->            
        ];
        <!-- nieuwe item toevoegen aan local storage -->

css: 
.ng-hide-remove { 
animation:0.5s lightSpeedOut ease;
}


@keyframes lightSpeedOut {
0% {
opacity: 1;
}

100% {
transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}

Answer 1

这是你的动画，但没有关键帧：

.page.ng-hide-add,
.page.ng-hide-remove
{
    -webkit-transition: 2000ms ease all;
    -moz-transition: 2000ms ease all;
    -ms-transition:2000ms ease all;
    -o-transition: 2000ms ease all;
    transition: 2000ms ease all;
}

.page.ng-hide-remove  {
    opacity:0
}

.page.ng-hide-remove.ng-hide-remove-active {
    opacity:1
}

.page.ng-hide-add  {
    left: 0;
    -webkit-transform:  skewX(0deg);
    -moz-transform:skewX(0deg);
    -o-transform : skewX(0deg);
    transform:  skewX(0deg);
    opacity:1
}

.page.ng-hide-add.ng-hide-add-active{
    left: 100%;
    -webkit-transform: skewX(30deg);
    -moz-transform:skewX(30deg);
    -o-transform : skewX(30deg);
    transform:  skewX(30deg);
    opacity:0
}


.page{
    position:absolute;
    left:0;
    width 100%;
}

.container{
    position: relative;
    height:40px;
}

我让你成为了一个jsfiddle http://jsfiddle.net/s2ygrya6/

无法使用animationjs来使用AngularJS

1 个答案: