Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

ngAnimate: the addClass/removeClass class is added during the animation #11810

Closed
mgol opened this issue May 5, 2015 · 2 comments
Closed

ngAnimate: the addClass/removeClass class is added during the animation #11810

mgol opened this issue May 5, 2015 · 2 comments
Assignees
@matsko
Labels
component: ngAnimate severity: confusing
Milestone
1.4.0-rc.3

Comments

@mgol
Copy link
Member

mgol commented May 5, 2015

See http://plnkr.co/edit/iAgdX7hon6aEqMvSko9A?p=preview and click the green box while looking at its styles. The addClass/removeClass/addClass-active/removeClass-active class is being added during the animation. Is this intended? Note that HTML is case-insensitive so this looks weird.

Angular 1.4.0-rc.1.

screen shot 2015-05-05 at 18 43 28

cc @matsko
@mgol mgol added this to the 1.4.0-rc.2 milestone May 5, 2015
@mgol
Copy link
Member Author

mgol commented May 5, 2015

For posterity:

JS:

'use strict';

angular.module('myApp', ['ngAnimate', 'ngResource', 'ngSanitize'])
.directive('cbnItemPanel', function ($timeout) {
  return {
    restrict: 'E',
    template: '<div><div class="slider-trigger"></div></div>',
    scope: {
      ui: '=',
    },
    link: function (scope, elem) {
      elem.find('.slider-trigger').on('click', function () {
        scope.$apply(function () {
          console.log('click!');
          scope.ui.historyShown = !scope.ui.historyShown;
        });
      });
    },
  };
})
.run(function ($rootScope) {
  $rootScope.state = {
    ui: {
      historyShown: false,
    },
  };
});

HTML:

<!DOCTYPE html>
<html class="ng-cloak" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test page</title>
  </head>

  <body>
    <cbn-item-panel
      ng-class="{
        'history-compensated-anim': state.ui.historyShown,
      }"
      ui="state.ui"></cbn-item-panel>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular-animate.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular-resource.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </body>
</html>

CSS:

cbn-item-panel {
  position: fixed;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #2b2b2b;
}

cbn-item-panel.history-compensated-anim-add {
  transition: transform 3s;
  transform: translateY(0);
}

cbn-item-panel.history-compensated-anim,
cbn-item-panel.history-compensated-anim-add.history-compensated-anim-add-active {
  transform: translateY(54px);
}

cbn-item-panel.history-compensated-anim-remove {
  transition: transform 4s;
  transform: translateY(54px);
}

cbn-item-panel,
cbn-item-panel.history-compensated-anim-remove.history-compensated-anim-remove-active {
  transform: translateY(0);
}

.slider-trigger {
    position: relative;
    display: block;
    width: 100px;
    height: 30px;
    background: red;
}

@mgol
Copy link
Member Author

mgol commented May 5, 2015

Might be related: #11812

matsko added a commit to matsko/angular.js that referenced this issue May 7, 2015
@matsko
fix(ngAnimate): class-based animations must set the addClass/removeCl…
b1a933e 
…ass class on the element

With the abstraction system that ngAnimate uses, $animateCss internally
sets the provided `event` as a CSS class on the element. In this
situation the `addClass` and `removeClass` events on the element as a
CSS class. This should not happen with class-based animations and this
feature is unnecessary and has now been removed.

Closes angular#11810
@matsko matsko mentioned this issue May 11, 2015
Closed
matsko added a commit to matsko/angular.js that referenced this issue May 20, 2015
@matsko
fix(ngAnimate): class-based animations must set the addClass/removeCl…
20b509d 
…ass class on the element

With the abstraction system that ngAnimate uses, $animateCss internally
sets the provided `event` as a CSS class on the element. In this
situation the `addClass` and `removeClass` events on the element as a
CSS class. This should not happen with class-based animations and this
feature is unnecessary and has now been removed.

Closes angular#11810
matsko added a commit to matsko/angular.js that referenced this issue May 20, 2015
@matsko
fix(ngAnimate): class-based animations must set the addClass/removeCl…
5f0f82d 
…ass class on the element

With the abstraction system that ngAnimate uses, $animateCss internally
sets the provided `event` as a CSS class on the element. In this
situation the `addClass` and `removeClass` events on the element as a
CSS class. This should not happen with class-based animations and this
feature is unnecessary and has now been removed.

Closes angular#11810
@matsko matsko closed this as completed in 3a3db69 May 21, 2015
netman92 pushed a commit to netman92/angular.js that referenced this issue Aug 8, 2015
@matsko @netman92
fix(ngAnimate): class-based animations must not set addClass/removeCl…
6cbf9a6 
…ass CSS classes on the element

With the abstraction system that ngAnimate uses, $animateCss internally
sets the provided `event` as a CSS class on the element. In this
situation the `addClass` and `removeClass` events on the element as a
CSS class. This should not happen with class-based animations and this
feature is unnecessary and has now been removed.

Closes angular#11810
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@matsko matsko

Labels
component: ngAnimate severity: confusing
Projects
None yet
Milestone
1.4.0-rc.3
3 participants
@petebacondarwin @matsko @mgol