ngAnimate CSS动画与吴先生秀＆放工作; NG-隐藏 [英] ngAnimate CSS animation not working with ng-show & ng-hide

问题描述

DEMO： http://plnkr.co/edit/cPDUWO？ p = preVIEW

我有2个选中的复选框，并显示在页面上2的小部件。点击复选框将使用 NG-节目＆安培; NG-隐藏隐藏和显示相应的部件。现在，我想也有一个基本的淡入和淡出，但至今没有运气:(，展示了小部件/隐藏没有任何的动画渐变。你能看到我要去哪里错了？

控制器

  animateApp.controller（'mainController'，函数（$范围）{
    $ scope.pageClass =页面家;
    $ scope.widget_manage_quotes = TRUE;
    $ scope.widget_manage_customer = TRUE;
}）;
 

CSS

  .reveal-animation.ng进入{
    -webkit-动画：enter_sequence 1秒线性的; / * Safari /铬* /
    动画：enter_sequence 1秒线性的; / * + IE10未来的浏览器* /
}.reveal-animation.ng休假{
    -webkit-动画：leave_sequence 1秒线性的; / * Safari /铬* /
    动画：leave_sequence 1秒线性的; / * + IE10未来的浏览器* /
}@ -webkit-关键帧enter_sequence {
    0％{不透明度：0; }
    100％{不透明度：1; }
}@keyframes enter_sequence {
    0％{不透明度：0; }
    100％{不透明度：1; }
}@ -webkit-关键帧leave_sequence {
    0％{不透明度：1; }
    100％{不透明度：0; }
}@keyframes leave_sequence {
    0％{不透明度：1; }
    100％{不透明度：0; }
}
 

HTML

 ＆LT; UL＆GT;
    ＆LT;立GT;
        ＆LT;输入
            NG-点击=widget_manage_quotes =！widget_manage_quotes
            类型=复选框
            NAME =w_manage_quotes
            ID =w_manage_quotes
            类=CSS-复选框
            检查/＆GT;        ＆LT;标签=w_manage_quotes级=CSS标签radGroupWidgetOptions＆GT;切换窗口小部件1 LT; /标签＆gt;
    ＆LT; /李＆GT;
    ＆LT;立GT;
        ＆LT;输入
            NG-点击=widget_manage_customer =！widget_manage_customer
            类型=复选框
            NAME =w_manage_customers
            ID =w_manage_customers
            类=CSS-复选框
            检查/＆GT;        ＆LT;标签=w_manage_customers级=CSS标签radGroupWidgetOptions＆GT;切换窗口小部件2'; /标签＆gt;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;  ＆LT; D​​IV NG秀=widget_manage_quotes级=manage_content dash_widget透露，动画操作。＆GT;
    ＆LT; D​​IV CLASS =widget_box BOX1＆GT;
      ＆LT; H1＆GT;的Widget 1 LT;！/ H1＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;  ＆LT; D​​IV NG秀=widget_manage_customer级=manage_content dash_widget显示动画＆GT;
    ＆LT; D​​IV CLASS =widget_box BOX2＆GT;
      ＆所述; H1＆GT;窗口小部件2';！/ H1＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

貌似正确的方式应该包括 .ng隐藏-添加和。 NG-捉迷藏删除：

  .reveal-animation.ng-hide.ng隐藏-添加活性{
    ！显示：块重要;
}
.reveal-animation.ng隐藏，删除{
    -webkit-动画：enter_sequence 1秒线性的; / * Safari /铬* /
    动画：enter_sequence 1秒线性的; / * + IE10未来的浏览器* /
}
.reveal-animation.ng隐藏，添加{
    -webkit-动画：leave_sequence 1秒线性的; / * Safari /铬* /
    动画：leave_sequence 1秒线性的; / * + IE10未来的浏览器* /
}
 

我也不得不添加样式 .ng-hide.ng隐藏，添加活性来prevent NG-隐藏。

演示： http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preVIEW

DEMO: http://plnkr.co/edit/cPDUWO?p=preview

I have 2 checked checkboxes and 2 widgets displayed on the page. Clicking the checkboxes will use ng-show & ng-hide to hide and show the corresponding widget. Now I want to also have a basic fadeIn and fadeOut, however no luck so far :( The widgets that show/hide without any fade animation. Can you see where I'm going wrong?

Controller

animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
    $scope.widget_manage_quotes = true;
    $scope.widget_manage_customer = true;
});

CSS

.reveal-animation.ng-enter {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}

.reveal-animation.ng-leave {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

@-webkit-keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@keyframes enter_sequence {
    0% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

@keyframes leave_sequence {
    0% { opacity:1; }
    100% { opacity:0; }
}

HTML

<ul>
    <li>
        <input
            ng-click="widget_manage_quotes = !widget_manage_quotes"
            type="checkbox" 
            name="w_manage_quotes"
            id="w_manage_quotes" 
            class="css-checkbox"
            checked />

        <label for="w_manage_quotes" class="css-label radGroupWidgetOptions">Toggle Widget 1</label>
    </li>
    <li>
        <input
            ng-click="widget_manage_customer = !widget_manage_customer"
            type="checkbox" 
            name="w_manage_customers"
            id="w_manage_customers" 
            class="css-checkbox"
            checked />

        <label for="w_manage_customers" class="css-label radGroupWidgetOptions">Toggle Widget 2</label>
    </li>
  </ul>

  <div ng-show="widget_manage_quotes" class="manage_content dash_widget reveal-anim   ation">
    <div class="widget_box box1">
      <h1>Widget 1!</h1>
    </div>
  </div>

  <div ng-show="widget_manage_customer" class="manage_content dash_widget reveal-animation">
    <div class="widget_box box2">
      <h1>Widget 2!</h1>
    </div>
  </div>

解决方案

Looks like correct styles should include .ng-hide-add and .ng-hide-remove:

.reveal-animation.ng-hide.ng-hide-add-active {
    display: block !important;
}
.reveal-animation.ng-hide-remove {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
.reveal-animation.ng-hide-add {
    -webkit-animation: leave_sequence 1s linear; /* Safari/Chrome */
    animation: leave_sequence 1s linear; /* IE10+ and Future Browsers */
}

I also had to add style for .ng-hide.ng-hide-add-active to prevent ng-hide from immediately hiding elements during animation.

Demo: http://plnkr.co/edit/HsyRYLTwcsvP9pok8BV6?p=preview

这篇关于ngAnimate CSS动画与吴先生秀＆放工作; NG-隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！