Transitioning from jQuery to AngularJS animation

I was in the process of learning how to use jquery, but ended up having to switch over to Angularjs. Now I am feeling a bit overwhelmed as I try to recreate a similar effect to this: http://codepen.io/marlenesco/full/NqOozj/

Although I will share some of the Javascript code here, the CodePen example is really what I would like to achieve...

$(function() {
    $('.material-card > .mc-btn-action').click(function () {
        var card = $(this).parent('.material-card');
        var icon = $(this).children('i');
        icon.addClass('fa-spin-fast');

        if (card.hasClass('mc-active')) {
            card.removeClass('mc-active');

            window.setTimeout(function() {
                icon
                    .removeClass('fa-arrow-left')
                    .removeClass('fa-spin-fast')
                    .addClass('fa-bars');

            }, 800);
        } else {
            card.addClass('mc-active');

            window.setTimeout(function() {
                icon
                    .removeClass('fa-bars')
                    .removeClass('fa-spin-fast')
                    .addClass('fa-arrow-left');

            }, 800);
        }
    });
});

I'm not entirely sure if this should be done using CSS alone or with Ng animate. If anyone has any helpful resources to guide me in the right direction, I would greatly appreciate it!

Thank you

javascriptjqueryangularjscss

Answer №1

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="MyController">
<div class="container">

<div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="user in users">
            <article class="material-card {{colors[$index+1]}}" id="card{{$index}}">
                <h2>
                    <span class="raleway">{{user.name}}</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        {{user.email}}
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="{{user.image}}">
                    </div>
                    <div class="mc-description">
                        {{user.desc}}
                    </div>
                </div>
                <a class="mc-btn-action" ng-click="make_active($index)">
                    <i class="fa fa-bars" id="iconspin{{$index}}"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>

    </div>
</div>

</div>
<script>
var app = angular.module('myApp', ['angular.filter']);

app.controller('MyController', function ($scope,$http,$sce) 
{
    $scope.colors = ['material-card','Red','Pink','Purple','Indigo','Blue','Light-Blue','Cyan','Teal','Green','Light-Green','Lime','Yellow','Amber','Orange','Deep-Orange','Brown','Grey','Deep-Purple'];

    $scope.make_active = function(id)
        {   
            if(!$("#card"+id).hasClass("mc-active"))
            {   
                $("#iconspin"+id).addClass('fa-spin-fast');

                $("#card"+id).addClass("mc-active");
                window.setTimeout(function () 
                {
                    $("#iconspin"+id).removeClass('fa-bars').removeClass('fa-spin-fast').addClass('fa-arrow-left');
                }, 500);
            }
            else
            {
                $("#iconspin"+id).addClass('fa-spin-fast');
                $("#card"+id).removeClass("mc-active");
                window.setTimeout(function ()
                {
                    $("#iconspin"+id).removeClass('fa-arrow-left').removeClass('fa-spin-fast').addClass('fa-bars');
                }, 500);
            }
        }

    $scope.users = [{'name':'Paresh Gami','email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caadaba7a3baabb8afb9a2ff8aada7aba3a6e4a9a5a7">[email protected]</a>','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe8eee2e6ffeefdeafce7bacfe8e2eee6e3a1ece0e2">[email protected]</a>','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbbbdb1b5acbdaeb9afb4e99cbbb1bdb5b0f2bfb3b1">[email protected]</a>','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1671777b7f66776473657e2356717b777f7a3875797b">[email protected]</a>','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},
    ]

});
</script>
</body>
</html>

Feel free to run the entire code but make sure to copy the CSS from the link provided below:

https://github.com/marlenesco/material-cards/blob/master/dist/material-cards.css

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

Enhance the appearance of the jQuery document.ready function

I'm attempting to customize the jQuery document.ready function <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript> $(function() { c ...

javascriptjquerydom

Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally: .form-holder{ padding-left: 20px; width: auto; background: ; overflow-x: auto; max-height: 300px; padding-bottom: 30px; } Every ...

jquerycss

Incorporating d3-force-3d computations into a three-dimensional graph visualization tool

Looking to create 3D force directed graphs for my project, but struggling to find a library that incorporates d3-force-3d calculations. The existing libraries I've come across lack the ability to customize forces, particularly 3d-force-graph. Is ther ...

javascriptd3.jsthree.jsd3-force-directed

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

jquerycssangularbootstrap-4external-js

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

What is the method for avoiding short-circuit conditions in TypeScript?

Is there a way to evaluate conditions in TypeScript without using short-circuiting? TypeScript does not support & or | for boolean types. I need to avoid short-circuit checking because I call the showErrors function inside the isValueValid function. C ...

javascripttypescriptevaluation-strategy

Performing a dynamic animation by toggling the class of an element with "classList.toggle" in JavaScript

I have been attempting to incorporate a fade animation using CSS when altering the class of the input and label elements within a form by utilizing the classList.toggle method in JavaScript. I'm puzzled as to why my code isn't producing the desir ...

javascripthtmlcssdomcss-animations

NodeJS buffer is not capable of handling incomplete TCP stream data

While troubleshooting my TCP JSON stream on the live server, I discovered that if the data streamed to me in JSON format is excessive, it doesn't consistently parse correctly. It requires multiple streams for successful parsing. Here is the code I am ...

javascriptnode.jssocketstcp

Intercepting HTTP response errors is preventing the $http error callback from being invoked during testing with $httpBackend

Currently, I'm in the process of testing an angular service method using $httpBackend. The goal is to mock different responses depending on the request data. The issue arises when attempting to simulate an error status for invalid requests; despite se ...

angularjsjasminekarma-jasmine

The background image set using Bootstrap is displayed across all pages on my website

Here is the code I've been working on: html, body { background: url("media/images/maishahotbgimg.jpg") repeat; The background image is currently showing only on the homepage. How can I make it appear on all pages of my website? ...

htmlcssbootstrap-5

What's the reason behind the refusal of my connection to localhost at port 3000 in Node.JS?

As a student venturing into the world of back-end development for the first time, I decided to dive into learning Node.JS. To kick things off, I downloaded a PDF book titled "Jumpstart Node.JS" from SitePoint. Following the provided instructions, I attempt ...

javascriptnode.js

sending the AJAX request from back to the original JavaScript function

Here presents an issue. I am dealing with an HTML Form that contains a submit button with an onclick=validationFunction(). When this button is clicked, the form values are passed to the mentioned function. Within this function, the form values undergo va ...

phpjavascriptajax

Testing RESTful APIs in Node.js

Currently, I am conducting a testing project utilizing the Jasmine framework in Node.js. For the client code, I performed unit tests by mocking with $httpBackend. Now, my focus is on testing the server-side code and REST APIs. However, I am unsure of the ...

node.jsangularjsunit-testing

I possess an item, but unfortunately, I am only able to save the first object from this possession

I have an object, but I can only save the first item from this object. Interface: export interface PhotoToCreate { albumName: string; albumTitle: string; ImageNameO : string; imageNameT : string; } Component import { Component, OnI ...

javascriptangulartypescript

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

htmlcssangular

Failing to retrieve data from Ajax response

When handling requests in a servlet, the following code snippet processes the request received: Gson gson = new Gson(); JsonObject myObj = new JsonObject(); LoginBean loginInfo = getInfo(userId,userPwd); JsonElement loginObj = gson.toJsonTree(loginInfo) ...

javajavascriptjqueryajaxservlets

Choose all or none of the items from the list with a single click - v-list-item-group

I am interested in incorporating Vuetify's v-list-item-group component into my Vue application. This list is intended to represent nodes that are related to a graph, allowing users to select none, some, or all of them and delete the selected nodes. T ...

javascriptvue.jsvuetify.js

Implementing Oauth in Angular and Node

I am facing challenges with implementing oauth in Angular. When I directly enter the link into the browser http://localhost:8080/auth/twitter I am able to successfully connect using oauth and receive a response. However, when I try to achieve the same in ...

javascriptangularjsnode.jsoauthcors

Adjust grid width dynamically according to the container

I am working with a grid made up of 32x32 slots. Link to Grid Image How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile? Below is the code snippet: <style> .drag-item { pos ...

htmlcss