Disable item-delete slide-in animation


#1

Hello

I wanted to show a list which is on editing mode on enter. I’ve added <ion-list show-delete="true" show-reorder="true"> and it works fine. The only issue is, that the the delete and reorder buttons have a slide-in animation?

Codepen: http://codepen.io/anon/pen/GJMYKb

Does anybody know how to disable the slide-in animation? Thanks.


#2

If well I think IONIC add css class (.item-remowe-animation.ng-level) for element after “click”. This class use a css transition. This can help

.list .item-remowe-animation.ng-level {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

#3

Thank you very much for your reply. That was my first idea too, but unfortunately removing the transition doesn’t work alone. I had to set the transformation too. This is my (hacky) solution:

// Add vendor prefixes yourself
.item-content {
  transform: translate3d(50px, 0, 0);
  transition: none;
}

.item-left-edit {
  display: block;
  opacity: 1;
  transform: translate3d(8px, 0, 0);
  transition: none;
}

.item-right-edit {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}

#4

Or more DRY :smile:

.item-left-edit,
.item-right-edit,
.item-content {
      display: block;
      opacity: 1;
      transform: translate3d(8px, 0, 0);
      -webkit-transform: translate3d(8px, 0, 0);
      transition: none;
      -webkit-transition: none;
    }

#5

You’re right, thanks. But the X transformation is slightly different.

For future reference:

// Add vendor prefixes
.item-content,
.item-left-edit,
.item-right-edit {
  display: block;
  opacity: 1;
  transition: none;
  transform: translate3d(0, 0, 0);
}

.item-content {
  transform: translate3d(50px, 0, 0);
}

.item-left-edit {
  transform: translate3d(8px, 0, 0);
}

#6

Or SASS way :slight_smile:

.item-right-edit {
  display: block;
  opacity: 1;
  transition: none;
  transform: translate3d(0, 0, 0);
}

.item-content {
  @extend .item-right-edit;
  transform: translate3d(50px, 0, 0);
}

.item-left-edit {
  @extend .item-right-edit;
  transform: translate3d(8px, 0, 0);
}

Or no better is

@mixin disable-animation ($translat) {
      display: block;
      opacity: 1;
      transition: none;
      transform: translate3d($translat);
}

.item-right-edit { 
       @include disable-animation(0, 0, 0)
}

.item-content { 
       @include disable-animation(50px, 0, 0)
}

.item-left-edit  { 
       @include disable-animation(8px, 0, 0)
}