AngularsJsのフェージングとフェードアウト？

私はAngularsで新しく、私は1.6.5バージョンを使用しています。AngularsJsのフェージングとフェードアウト？

私の要素をクリックしただけで表示するのではなく、ちょうど非表示にする代わりにクリックしてフェードアウトしたい、ここに私のコードですHTML：

.try.ng-enter { 
transition: 2s all; 
opacity: 1; 
} 

.try.ng-enter.ng-enter-active { 
transition: 2s all; 
opacity: 1; 
} 

.try.ng-leave { 
transition: 2s all; 
opacity : 1; 
} 
.try.ng-leave.ng-leave-active { 
transition: 2s all; 
opacity: 1; 
}

私が午前問題は私の要素は任意の助けのため感謝を2秒で表示されますが、すぐに.. doesntのことです：

<ul> 
      <li class="try" ng-if="bool"><label>email</label> : [email protected]</li> 
      <li ng-click="bool=false"><label>téléphone</label> : +2126-13-85-98-34 </li> 
      <li ng-click="bool=true"><label>website</label> : oujda.ma.taoufiq.com</li> 
</ul>

そして、ここでは私のCSSファイルです。

出典

2017-11-13 TaouBen

理由は、ng-ifを使用しているためです。これはあなたの要素をDOMから完全に消滅させます。それをng-showに変更すると、問題が解決されます。

完全なコード：

<ul> 
    <li class="try" ng-show="bool"><label>email</label> : [email protected]</li> 
    <li ng-click="bool=false"><label>téléphone</label> : +2126-13-85-98-34 </li> 
    <li ng-click="bool=true"><label>website</label> : oujda.ma.taoufiq.com</li> 
</ul>

出典

2017-11-13 22:22:18

は私の問題が解決さ:) – TaouBen

また、角度の方法であるngAnimateを使用することができます。

var app = angular.module('taskApp', ['ngAnimate']); 
 

 
app.controller('taskCtrl', function($scope) { 
 
    $scope.tasks = [ 
 
    { title: 'Go to the Zoo'}, 
 
    { title: 'Take a Nap'}, 
 
    { title: 'Start Learning AngularJS'}, 
 
    { title: 'Meet Susan at the Gym'} 
 
    ]; 
 

 
    $scope.addtask = function() { 
 
    $scope.tasks.push($scope.task); 
 
    $scope.task = {}; 
 
    }; 
 

 
    $scope.removeItem = function(index) { 
 
    $scope.tasks.splice(index, 1); 
 
    }; 
 
});

body { 
 
    font-family: 'Lato'; 
 
    margin: 10px auto; 
 
    max-width: 800px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin-top: 40px; 
 
    margin-left: 10px; 
 
    font-size: 1.1em; 
 
    position: relative; 
 
} 
 

 
form { 
 
    margin-left: 10px; 
 
} 
 

 
ul li { 
 
    list-style: none; 
 
    margin: 15px auto; 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    margin: 10px; 
 
    text-align: center; 
 
} 
 

 
h2 { 
 
    margin: 10px; 
 
} 
 

 
p { 
 
    margin-left: 10px; 
 
} 
 

 
form { 
 
    margin-top: 50px; 
 
} 
 

 
input { 
 
    border: none; 
 
    border-bottom: 1px solid orange; 
 
    padding: 4px 10px; 
 
    outline: none; 
 
} 
 

 
button { 
 
    border: none; 
 
    background: cornflowerblue; 
 
    color: white; 
 
    padding: 5px 12px; 
 
    margin-left: 20px; 
 
    border-radius: 4px; 
 
} 
 

 
.done { 
 
    font-size: 0.7em; 
 
    font-weight: bold; 
 
    background: black; 
 
    color: white; 
 
    padding: 1px 5px; 
 
    position: relative; 
 
    top: -3px; 
 
    border-radius: 2px; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.done:hover { 
 
    background: rgb(200, 0, 0); 
 
} 
 

 
@keyframes added { 
 
    from { 
 
    opacity: 0; 
 
    top: -500px; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    top: 0px; 
 
    } 
 
} 
 

 
@keyframes deleted { 
 
    from { 
 
    top: 0; 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    top: 200px; 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.task-item.ng-enter { 
 
    animation: 0.25s linear added; 
 
} 
 

 
.task-item.ng-leave { 
 
    animation: 0.25s linear deleted; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.js"></script> 
 

 
<body ng-app="taskApp"> 
 
    <h2>A Random List of Tasks</h2> 
 
    <div ng-controller="taskCtrl"> 
 
    <form ng-submit="addtask()"> 
 
     <input type="text" ng-model="task.title"> 
 
     <button type="submit">Add Task</button> 
 
     <br> 
 
    </form> 
 
    <ul> 
 
     <li class="task-item" ng-repeat="task in tasks"> 
 
     <span class="done" ng-click="removeItem($index)">X</span> 
 
     <span>{{task.title}}</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

出典

2017-11-13 22:38:51 Yaser

感謝の友達に、あなたの友人に感謝あなたはとても役に立ちました。 – TaouBen

AngularsJsのフェージングとフェードアウト？

答えて

関連する問題