Question

在某个按钮点击事件后，我将元素的不透明度从0更改为1，反之亦然。

已为不透明度属性定义了过渡属性。

然而，转换效果未能发生。

这是plnkr的链接： http://plnkr.co/edit/hrxtvxIIAysEw1iF2DLn

原始属性设置如下：

.part1 {
  opacity: 0;
  transition: all 5ms linear;
}

.part2 {
  opacity: 0;
  transition: all 5ms ease-in;
}

.part3 {
  opacity: 0;
  transition: all 5ms ease-in-out;
}

过渡属性在指令中设置如下：

 scope.$watch(attrs.showMe, function(newValue) {

        if (newValue === true) {
          element.css({
            'opacity': 1,
            'display': 'block',
            'background-color': attrs.myColor
          });
        } else {
          element.css({
            'opacity': 0,
            'display': 'none'
          });
        }

      });

Answer 1

James Hans ，你好。有一些拼写错误，div没有关闭>等等。也改变了css。

看看这个有用的 Plunkr ，看看它是否适用于您的工作方式。重新模态中的红色/蓝色div 使用Plunkr中的代码，因为它与您在上面显示的内容不同。

my-modal.html

<div class="modal-body">

       <div class="part1" ng-show="active === 'part1'">
           <p>I am part 1</p>
       </div>

       <div class="part2" ng-show="active === 'part2'="active === 'part2'" >
           <p>I am part 2</p>
       </div>

</div>

样式css

.part1 {
  background-color: blue;
  height: 200px;
    -webkit-animation-name: part1; 
    -webkit-animation-duration: 4s; 
    animation-name: part1;
    animation-duration: 4s;

}

@-webkit-keyframes part1 {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes part1 {
    from {opacity: 0;}
    to {opacity: 1;}
}

.part2 {
  background-color: red;
  height: 200px;
    -webkit-animation-name: part2; 
    -webkit-animation-duration: 4s; 
    animation-name: part2;
    animation-duration: 4s;

}

@-webkit-keyframes part2 {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes part2 {
    from {opacity: 0;}
    to {opacity: 1;}
}

app.js

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';

  $scope.open = function() {

    $modal.open({
      templateUrl: 'my-modal.html',
      controller: 'Controller1'
    });

  }
});

app.controller('Controller1', function($timeout, $scope) {

  $scope.active = 'part2';

      $timeout(function() {
        $scope.active = 'part1';
      }, 3000);

    $timeout(function() {
        $scope.active = 'part1';
      }, 3000);
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@*" data-server="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
    <script data-require="ui-bootstrap@*" data-server="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <script data-require="jquery@2.1.3" data-server="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@*" data-server="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <button ng-click="open()">Open me</button>
  </body>

</html>

Answer 2

转换不会发生，因为您还要将元素display从block更改为none。由于转换属性为“全部”，因此浏览器仅在转换结束时应用显示更改。尝试删除显示更改，或仅将转换属性更改为opacity。

CSS Transition效果无法正常工作

2 个答案: