В моем коде я пытаюсь создать несколько div, в которых есть скрытая кнопка. При нажатии этой кнопки соответствующий div должен исчезать, а div ниже него должен опускаться (т.е. они должны заполнять пространство, созданное исчезнувшим div, через некоторую анимацию).
Вот мой html-код:
<body ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array' ng-hide="x.show">
<p>{{ x.text }}
</p>
<button ng-click="toggle($index)">Hide</button>
</div>
</body>
Мой файл js содержит следующее:
var app = angular.module('task');
app.controller('repeat',function($scope){
$scope.array = [{
show: true,
text:'Sample Text 1'},
{
show: true,
text:'Sample Text 2'},
{
show: true,
text:'Sample Text 3'}];
$scope.toggle = function(){
$scope.array[index].show = false ;
};
})
И в моем css у меня есть следующий код:
.ng-hide-add { animation:1s fade ease; }
@keyframes fade{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Я просмотрел много анимаций слайдера, которые размещены в сети и пытались адаптировать их к моей программе, но до сих пор провалились.
Можете ли вы сказать мне, какой код следует добавить, чтобы сделать анимацию возможной. Поистине оцените ваши ответы.
Попробуйте поставить этот css:
.ng-leave {
-webkit-animation: fadeOutLeft 1s;
animation: fadeOutLeft 1s;
}
.ng-enter {
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
Попробуйте использовать переходы. http://jsfiddle.net/bzr1fc5v/10/
.fade {
transition-property: opacity, height;
transition-duration: 0.5s, 0.5s;
transition-delay: 0s, 0.5s;
opacity:0;
height: 0;
}
div { height: 50px; }
И HTML
<div ng-app="task" ng-controller="repeat">
<div ng-repeat='x in array track by $index' ng-class="[x.show ? '' : 'fade']" >
<p>{{ x.text }}</p>
<button ng-click="toggle($index)">Hide</button>
</div>
<div>
Обратите внимание, что мне нужно было установить высоту div. Кроме того, вы можете захотеть добавить префиксы поставщиков, чтобы поймать старые браузеры.
-webkit-
-moz-
-ms-
-o-
Вы также можете добавить обработчик событий, чтобы фактически скрыть его, как только он исчез.
$('div').on('transitionend', function(e){ if(e.originalEvent.propertyName == 'height') $(e.target).hide(); })
Вы можете попробовать это.
Вот Плункер
JS:
directive("divAnimate",function(){
return {
link : function(scope,ele,attr){
ele.bind('click',function(){
$(this).parent().fadeOut()
})
}
}
})
HTML:
<body ng-app="task" ng-controller="repeat">{{}}
<div ng-repeat="x in array" ng-show="x.show">
<p>{{ x.text }}
</p>
<button div-animate>Hide</button>
</div>
</body>
Вместо fadeOut() вы можете использовать любой метод jquery для создания эффекта анимации