Question

是否可以淡化ng-bind-html填写的元素的内容。已经尝试使用id.ng-enter或id.ng-leave但没有成功。

Answer 1

ng-if将根据表达式的布尔值动态添加/删除DOM元素。 ng-animation可以附加到具有更改DOM的ng-if指令的元素。

当填写htmlContent时，将添加此元素。

<body ng-controller="myCtrl">
  <button ng-click="fillinContent()">fillin</button>
  <div ng-if="htmlContent" class="toggle" ng-bind-html="htmlContent"></div>
 </body>

Decalre CSS3过渡

<style>
    .toggle{
        -webkit-transition: linear 1s;
        -moz-transition: linear 1s;
        -ms-transition: linear 1s;
        -o-transition: linear 1s;
        transition: linear 1s;
    }
    .toggle.ng-enter{
        opacity: 0;
    }
    .toggle.ng-enter-active{
        opacity: 1;
    }
    .toggle.ng-leave{
        opacity: 1;
    }
    .toggle.ng-leave-active{
        opacity: 0;
    }
</style>

控制器

angular.module("myApp",['ngSanitize','ngAnimate'])
.controller("myCtrl",function($scope){
  $scope.fillinContent = function(){
    $scope.htmlContent = "content content";
  }
});

单击填充按钮时，html内容将淡入：

enter image description here

AngularJS Fade通过ng-bind-html更改了内容

1 个答案: