How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :)

I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http://codepen.io/anon/pen/MmyeXb

HTML

<div class="text-center" ng-app="myApp" ng-controller="ItemCtrl">

      <!-- button up -->
      <button class="btn btn-success" ng-click="up()">up</button>

      <div style="width: 25%;margin-left: 37%" class="bg-info p-3 container">
        <ul class="list-group">

          <!-- list item to be animated -->
          <li class="list-group-item m-1" ng-class="slide=='up' ? 'slide-up':'slide-down '" ng-repeat="item in items">
            {{item}}
          </li>

        </ul>
      </div>

      <!-- button down -->
    <button class="btn btn-success" ng-click="down()">down</button>  

    </div>
    

CSS

.slide-up.ng-enter {
        animation: slideInDown 1s;
      -webkit-animation: slideInDown 1s;
    }


    .slide-up.ng-leave {
        animation: slideOutDown 1s;
      -webkit-animation: slideOutDown 1s;

    }

    .slide-down.ng-enter {
        animation: slideInUp 1s;
      -webkit-animation: slideInUp 1s;
    }

    .slide-down.ng-leave {
        animation: slideOutUp 1s;
      -webkit-animation: slideOutUp 1s;

    }
    

JS

angular.module('myApp', ['ngAnimate'])
    .controller('ItemCtrl', function($scope) {
      $scope.items = [1,2,3,4,5];



      $scope.up = function() {
        $scope.slide='up';
          $scope.items.splice($scope.items.length-1, 1);
          $scope.items.unshift($scope.items[0]-1);
      }

        $scope.down = function() {
          $scope.slide='down';
          $scope.items.splice(0, 1);
          $scope.items.push($scope.items[$scope.items.length-1]+1);
      }
    });
    

The list item that's getting removed is still taking up space until animation is done, that doesn't look too good. Any advice on how I should approach this? Is there any better way for animating list items in Angular?

Thanks in advance!

Answer №1

I am having trouble understanding your message clearly. If you want to prevent the animation from removing an item, you can use the following CSS:

CSS

.slide-up.ng-leave {
    animation: slideOutDown 0s;
    -webkit-animation: slideOutDown 0s;
}

.slide-down.ng-leave {
   animation: slideOutUp 0s;
  -webkit-animation: slideOutUp 0s;
}

UPDATE

Additionally, I believe I have found what you are searching for.

You can position slides with ng-leave absolutely so that they do not occupy any space.

.slide-up.ng-leave {
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 100%;
   animation: slideOutDown 1s;
   -webkit-animation: slideOutDown 1s; 
 }


.slide-down.ng-leave {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  animation: slideOutUp 1s;
  -webkit-animation: slideOutUp 1s;
 }

And don't forget about this:

 ul {
    position: relative;
    padding-left: 0;
    margin-left: 0;
    height: 100%;
    overflow: hidden;
 }

View example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to access property 'addEventListener' of null. This issue appears to be related to a Chrome extension

It's been frustrating dealing with this persistent error. I'm in the process of creating my very first chrome extension and for some reason, I just can't seem to pinpoint what's wrong with this particular code snippet: let beginButton = ...

Utilizing Google Caja for JavaScript sanitization is the only way to ensure

Looking to safeguard the inputs provided to a nodejs server with the assistance of the google-caja sanitizer. However, it's somewhat overzealous and cleanses away the > and < symbols too. My project requires me to retain html characters in the ...

AngularJS providing visual indication for processing server requests

What is the proper Angular approach to indicate to the user that the application is waiting for a response from the server? I currently have a factory with the following code: app.factory('MyAppFact', ['$http', '$q', functi ...

Using React.js to add MongoDB documents into the database

Is there a way to directly insert documents into a MongoDB collection from a React component? I have been working on a personal project, which is a chat web application used for training purposes. For instance, when a user wants to post a new message in a ...

JQuery post request not providing the expected response after posting

I have a post request var prodId = getParameterByName('param'); var pass = $('#password1').val(); $.post("rest/forget/confirm", { "param" : prodId, "password" : pass }, function(data) { ...

Challenge with Angular dependencies: Transitioning from Windows to Linux

I'm facing a challenge with hosting an Angular application on Linux for a client. The application runs smoothly on Windows where the customer develops it. My NodeJS version is 19. Upon running npm install, I encountered this error message: npm notice ...

Show JSON response using AJAX jQuery

After receiving the JSON Response, { "user_data": { "id": 22, "first_name": xxx, "last_name": xxx, "phone_number": "123456789", }, "question_with_answers" : [ { "id": 1, ...

An individual referred to as "User" is currently not defined, despite

I am currently working on a react application and I'm facing an issue where the App component does not seem to be receiving my user value even though it is present. Interestingly, the same syntax works perfectly fine in other components. The error me ...

Showcasing solely the latest entry in the database utilizing nodeJS

I am having an issue with my code where it is only displaying the last record from the database. How can I modify it to display all the records from the database using nodeJS? Any assistance would be greatly appreciated. Thank you. var express = require ...

Utilizing jQuery to Extract Values from a List of Options Separated by Commas

While usually simple, on Mondays it becomes incredibly challenging. ^^ I have some HTML code that is fixed and cannot be changed, like so: <a class="boxed" href="#foo" rel="type: 'box', image: '/media/images/theimage.jpg', param3: ...

Best way to pass a variable from an html form to a php function using ajax

I am currently developing a voting system for multiple uploads where each uploaded image is within a foreach statement. Each image has a form attached to it with three buttons to vote up, down, or not at all. These buttons are associated with an INT value ...

Error message on WordPress or NPM: the JavaScript file for Bootstrap cannot run without jQuery loaded first

Currently, I am using NPM to bundle bootstrap along with several other scripts for a Wordpress theme. Since WordPress already loads jquery by default, I have made sure to exclude jquery from the bundle. However, even though I can see in Google Dev Tools t ...

Error message: Discord bot written in JS is unable to read the property 'execute' as it is undefined

I'm having trouble getting this code to work. Here is the main file snippet: const fs = require('fs'); bot.commands = new Discord.Collection(); const commandFiles = fs.readdirSync('./commands/').filter(file => file.endsWith ...

Error in Visual Studio with Angular 2 build: 'Promise' name not found

I recently started exploring Angular2 and followed the instructions provided in this quickstart guide: https://angular.io/guide/quickstart Everything seems to be working well after running npm install, but now I want to work on it within Visual Studio usi ...

I attempted to generate a 3x3 matrix and use ng-repeat to display the data, but unfortunately, the code is

This is the reply I received from the server. "data": [ { "id": 1, "ticket": "[ [\"5\",\"11\",\"24\",null, ...

Why are cloned jQuery elements triggering events on the parent <div> and not the child <div>?

Currently, I am working on a tool that includes dynamic input fields for user input. To create different sections, I have cloned some divs from the code successfully. However, I am facing an issue where the events attached to the parent div are triggered e ...

Change the marquee scrolling back to its original starting point

I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...

Using jQuery to adjust the input value up and down with buttons

var number = 1; $("#counter input").attr('value', number); $("#increase").click(function(){ $("#counter input").attr('value', number++); }); $("#decrease").click(function(){ $("#counter input").attr('value', number--); }); ...

I'm encountering an error when trying to use makeStyles

Something seems off with MUI. I was working on my project yesterday and makeStyles was functioning properly, but now it's suddenly stopped working. I'm encountering an error when calling it here: https://i.sstatic.net/tBf1I.png I suspect the iss ...

Javascript program that generates drag and drop elements using HTML5 features:

Whenever I attempt to drag and drop elements that are normally created by HTML, everything works fine. However, when I try to drag and drop elements generated by JavaScript, I encounter the following error: Uncaught TypeError: Cannot read property 'p ...