CSS過渡效果無法正常工作

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 。 由於過渡屬性為“全部”，因此瀏覽器僅在過渡結束時應用顯示更改。 嘗試刪除顯示更改，或將transition屬性更改為僅opacity 。

CSS過渡效果無法正常工作

問題描述

2 個解決方案

解決方案1
0 2015-06-21 08:50:31

解決方案2
0 2015-06-21 08:58:15

CSS過渡效果無法正常工作

問題描述

2 個解決方案

解決方案1 0 2015-06-21 08:50:31

解決方案2 0 2015-06-21 08:58:15

解決方案1
0 2015-06-21 08:50:31

解決方案2
0 2015-06-21 08:58:15