Добавление анимации слайдов для повторения

Question

Добавление анимации слайдов для повторения

0

В моем коде я пытаюсь создать несколько 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;
       }
 }

Я просмотрел много анимаций слайдера, которые размещены в сети и пытались адаптировать их к моей программе, но до сих пор провалились.

Можете ли вы сказать мне, какой код следует добавить, чтобы сделать анимацию возможной. Поистине оцените ваши ответы.

Aashish Ailawadi 01 июль 2015, в 13:38

Источник

Теги:

javascript

angularjs

css

animation

ng-repeat

3 ответа

Ещё вопросы

Sidharth Panwar · Answer 1 · 2015-07-01T09-18-00.000Z

Попробуйте поставить этот css:

.ng-leave {
  -webkit-animation: fadeOutLeft 1s;
  animation: fadeOutLeft 1s;
}
.ng-enter {
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

Arlen Beiler · Answer 2 · 2015-07-01T09-31-00.000Z

Попробуйте использовать переходы. 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(); })

RIYAJ KHAN · Answer 3 · 2015-07-01T08-50-00.000Z

Вы можете попробовать это.

Вот Плункер

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 для создания эффекта анимации