Delete Row with Micro-Interaction

advanced-prototyping
#1

Hello,

Is there a way to add micro-interactions to deleting a row in a repeater?

I want to show some subtle animation to the row deletion so it’s more noticeable and not as abrupt. I also want to keep the repeater so I can do filtering and sorting.

Something like this:

Is this possible?

#2

Hi!

Yes, it’s sort of possible. Your collapse animation curve will have to be linear, though. Here is the script

image

So in OnClick, it sets the opacity of the row to 0 animated over 200ms. Then it moves the row by 0,0 (as the opacity animation runs), the only purpose of which is to trigger the OnMove interaction.

When OnMove is triggered, it checks if height is 0. If it’s not, it reduces the height by 1 and then runs OnMoved again. It will continue to do this until the height is 0, at which point the row is deleted.

You may want to increase the size of the height decrease to 2px if you want it to animate faster.

Preview

File: repeater-delete-with-animation.rp (52.1 KB)

#3

This is great! Thank you!

For my purpose, clicking the row wouldn’t delete it. You’d have to click on an icon within the row:
image

Is there a way to target just the row and not the whole repeater?

#4

Hi!

If you want to click an item in your row to delete the row, do the following:

Put your entire row into a dynamic panel (or group the row) and name the group or DP “row”

Pseudocode

OnClick (of trash can in row)
  Set opacity of row to 0
  Move row by 0,0
 
OnMove (of row DP or group) 
  if height of this is greater than 0
    decrease height of this by 1
    force the OnMove event on this
  Else
    delete the row (This)
#5

I did find a semi-solution to add part of this micro-interaction.

I added a rectangle with a white fill over the entire row and set it hidden. Upon clicking the trash can icon in a row, it sets the rectangle to shown with a fade of 250ms, waits 250ms, then deletes the row.
image

This helps to show some kind of event has happened, but it doesn’t animate the rows moving up to take the deleted row’s space.repeater-delete-animation-ML.rp (71.1 KB)

#6

Thanks! I’ll try this out.

#7

Do you have an axure file to help me with this? I’m trying to figure out how to set the OnMove actions. I’ve only been using Axure for a couple of months, so still learning the ropes of things that are probably pretty simple.