从jquery转到AngularJS动画

Question

I started to learn some jquery but had to change over to Angularjs. 我开始学习一些jquery，但不得不改用Angularjs。 I am a bit lost as I am trying to recreate something like this: http://codepen.io/marlenesco/full/NqOozj/ 当我尝试重新创建这样的内容时，我有些失落： http : //codepen.io/marlenesco/full/NqOozj/

I'll post some of the Javascript with it.. codepen has the nice working example though..... 我将在其中发布一些Javascript。.Codepen虽然有一个不错的工作示例.....

$(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 am not sure if this is something I would do completely in CSS or something I would do with Ng animate. 我不确定这是我将完全在CSS中完成还是与Ng动画相关的事情。 If anyone has any resources that could get me in the right direction that would be incredible! 如果任何人有任何资源可以使我朝正确的方向前进，那将是不可思议的！

Thanks 谢谢

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':'gamiparesh5@gmail.com','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':'gamiparesh5@gmail.com','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':'gamiparesh5@gmail.com','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':'gamiparesh5@gmail.com','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>

Copy the whole code and run it, but you have to copy paste css throught this link 复制整个代码并运行它，但是您必须通过此链接复制粘贴CSS

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

从jquery转到AngularJS动画

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-05 13:48:02

从jquery转到AngularJS动画

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-05 13:48:02

解决方案1
1 已采纳 2016-01-05 13:48:02