• NativeScript development environment - we will only be using NativeScript preview to run the app so you don’t need to have an Android or iOS development environment setup.
• NativeScript app runner - in order to run apps without a full set up, you need to have the following apps installed on your device. Note that this is optional if you have the full NativeScript environment. You can simply run the app using the method you normally use.
• NativeScript Playground (iOS, Android) - used for scanning the QR code for deploying the app on your device.
• NativeScript Preview (iOS, Android) - used by NativeScript Playground to run the app on your device.

git clone https://github.com/anchetaWern/NativeScriptAnimatedTodo  
git checkout starter  

The starter branch contain the same code as the original repo where we forked it from. The master branch contains the final code of this tutorial.

tns preview  

If you have a full NativeScript development environment setup, you can simply execute tns run android or tns run ios instead.

• Declarative - the NativeScript implementation of the CSS3 animations API. If you’re familiar with CSS animations, you should immediately know how to implement this type of animation. Just remember that not everything you can do with CSS animations in a browser environment can be done in NativeScript. This method is best suited for animating multiple views.
• Imperative - this is NativeScript’s JavaScript API for animating views. Unlike CSS animations, this gives you a more fine-grain control over how you execute animations. For example, you can chain different animations using this method. This method is best suited for animating a specific view.

.remove-button {
    color: #b76769;
}

// add this 
.remove-button:pressed {
    transform: scale(1.2, 1.2);
} 

<StackLayout class="main" stretch="fill">  
    <Label text="todos" class="title" id="header" />
    ...
</StackLayout>  

let pageLoaded = (args: EventData) => {  
    let page = <Page>args.object;
    page.bindingContext = viewModel;

    // add these
    let message = page.getViewById("header");
    message.animate({
        translate: { x: 1, y: 20 },
        duration: 1000,
        scale: { x: 3, y: 3 },
        opacity: 1
    });
};

let message = page.getViewById("header");  

message.animate({  
    translate: { x: 0, y: 20 }, // translate the Y position by 20 pixels (top to bottom)
    scale: { x: 3, y: 3 }, // scale by 3 times its original size
    opacity: 1, // make the text more visible
    duration: 1000 // animate for 1 second
});

Both translate and scale require the x and y values. Even if you don’t want to animate a specific value, you have to specify it. In those case, simply pass in 0 as the value. This will retain the original size or position of that view in that specific coordinate.

/* app/app.css */

.title {
    /* replace these: */
    font-size: 10;
    opacity: 0.2;
    margin-bottom: 50;

    /* add this: */
    top: -20;
}

<Repeater.itemTemplate>  
    <StackLayout swipe="onSwipe">
        <GridLayout>
            ...
        </GridLayout>
    </StackLayout>
</Repeater.itemTemplate>  

let onSwipe = (args: GestureEventData) => {  
    let item = < StackLayout > args.view;

    item.animate({
        translate: {
            x: 500,
            y: 0
        }, // move the todo item 500px to the right from its original position, y stays the same
        duration: 700
    }).then(() => {
        // animation is complete so remove the item
        var todo = < Todo > ( < view.View > args.object).bindingContext;
        viewModel.remove(todo);
    });
};

Note: In the code above, we’re not actually checking which direction the user is swiping. Since this is not a game, and it’s normal to flick an item to the right if you want to remove it, the only thing that we care about is that we’re targeting a specific todo item. That’s why we specifically attached it to the StackLayout. Feel free to use NativeScript’s Gesture Module if you want to limit it to a specific direction.

// app/main-page.xml
<Repeater.itemTemplate>  
    <AbsoluteLayout swipe="onSwipe">
        <GridLayout left="{{ is_new ? -300 : 0 }}" columns="30, *, auto" rows="auto"
            class="{{ is_new ? 'todo is-new' : 'todo' }}">
        </GridLayout>
    </AbsoluteLayout>
</Repeater.itemTemplate>  

/* app/app.css */

.is-new {
    animation-name: slide_in;
    animation-duration: 0.5;
    /* animate for half a second */
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes slide_in {

    /* create a custom animation named slide_in */
    from {
        transform: translate(-300, 0);
    }

    to {
        transform: translate(300, 0);
    }
}

.is-new {
    transform: translate(300, 0);
}

// app/view-models/todo-view-model.ts
class Todo extends Observable {  
    text: string;
    completed: boolean=false;
    is_new: boolean=true; // add this
}

constructor(text: string,  
completed: boolean=false,  
is_new: boolean=true // add this

) {
    super();
    this.text=text;
    this.completed=completed;
    this.is_new=is_new; // add this
}

var value = localStorage.getItem(key);  
var result = new Array < Todo > ();  
if (value) {  
    let rawTodos = < Array < Todo >> JSON.parse(value);
    rawTodos.forEach(todo => {
        result.push(new Todo(todo.text, todo.completed, false)); // update this: pass false as the 3rd argument
    });
    return result;
} else return [];
});

// app/main-page.ts
let add = (args: EventData) => {  
    let todo = viewModel.add();
    setTimeout(() => {
        viewModel.makeOld(todo);
    }, 3000);
};

   // app/view-models/todo-view-model.ts
   add() {
   if (this.newTodo.trim().length > 0) {
     let todo = new Todo(this.newTodo.trim()); // update this
     this.todos.push(todo);

     this.set("newTodo", "");
     return todo; // add this
   } 

filterCompleted = {  
    // ...
}

makeOld(todo: Todo) {  
    todo.set("is_new", false);
    this._update();
}

// app/main-page.xml
<GridLayout left="{{ is_new ? -300 : 0 }}" columns="30, *, auto" rows="auto" class="{{ is_new ? 'todo is-new' : (is_removed) ? 'todo is-removed' : 'todo' }}">  

/* app/app.css */
.is-removed {
    animation-name: slide_out;
    animation-duration: 0.5;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes slide_out {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(700, 0);
    }
}

// app/view-models/todo-view-model.ts
remove(todo: Todo) {  
    todo.set("is_removed", true); // add this

    setTimeout(() => {
        // existing code
        var index = this.todos.indexOf(todo);
        this.todos.splice(index, 1);
        this._update();
    }, 700);
}

clearCompleted() {  
    // add these:
    var completedTodos = this.todos.filter((todo: Todo) => {
        if (todo.completed == true) {
            todo.set("is_removed", true);
        }
    });

    setTimeout(() => {
        // existing code
        var activeTodos = this.todos.filter((todo: Todo) => {
            if (todo.completed == false) {
                return true;
            }
        });

        this.set("todos", activeTodos);
        this._update();
    }, 500);
}