Angular - Anchor頁內鏈接 - Flash背景

我有兩個divs /列，左邊是錨點列表，右邊是內容段落。當點擊錨（或div）時，它將滾動到右欄中的相應內容。Angular - Anchor頁內鏈接 - Flash背景

我想多走一些路，並在目標背景上添加一些閃光燈，以便用戶更容易地找到它。我可以使用下面的CSS來做到這一點：

/* Highlight Background Animation */ 
@-webkit-keyframes highlight { 
    0% { 
     background-color: transparent; 
     opacity:1; 
    } 
    50% { 
     background-color: green; 
    } 
    100% { 
     background-color: transparent; 
    } 
} 

.active{ 
    -webkit-animation-name: highlight; 
    -webkit-animation-duration: 500ms; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: highlight; 
    -moz-animation-duration: 500ms; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: linear; 
}

於是用類.active任何閃爍了一下。我想使用我的Angular控制器來找到目標id並添加.active類（並從其他所有刪除.active）或以某種方式模擬該CSS背景動畫。

任何想法？

HTML

<div class="row"> 
    <left-column> 
     <div class="large-12 column"> 
      <a href="#target1">Target 01</a> 
     </div> 

     <div class="large-12 column"> 
      <a href="#target2">Target 02</a> 
     </div> 

     <div class="large-12 column"> 
      <a href="#target3">Target 03</a> 
     </div> 
    </left-column> 
</div> 

<div class="row"> 
    <right-column> 
     <div id="target1"> 
      <h3>Target 01</h3> 
      <p>Stuff here</p> 
     </div> 
     <div id="target2"> 
      <h3>Target 02</h3> 
      <p>Stuff here</p> 
     </div> 
     <div id="target3"> 
      <h3>Target 03</h3> 
      <p>Stuff here</p> 
     </div> 
    </right-column> 
</div>

JS（目前爲空）

function homeCtrl($scope) { 
    var vm = this; 
}

來源

2016-10-11 Kenny

是隔離範圍指令中的列嗎？這些項目是否已有數據模型？ – charlietfl

這些列位於一個叫做''和''的指令中。沒有數據模型。 – Kenny

*「沒有數據模型」* ...似乎你正在向後創建這個應用程序......創建視圖，然後試圖找出如何整合角度特徵。視圖應該由數據模型驅動。因此，您首先對數據建模。然後構建視圖來處理數據。例如，您的所有項目將在對象數組中的兩個指令之間共享，並且視圖會重複提供鏈接或內容部分 – charlietfl

因此，這是真正棘手，但我得到了正是我想要的理想效果。我不得不使用ngAnimate API的addClass和removeClass方法。所以首先我不得不添加的依賴：

angular.module('myApp', ['ngRoute', 'ngAnimate']);

接下來，我用ng-repeat創建所有的HTML和我使用的數據，同時加入了ng-click每個<a>標籤。

HTML

<div ng-repeat="topic in vm.data.topics" class="large-12 column"> 
    <a href="#{{ topic.tag }}" ng-click="vm.highlight(topic.tag)">{{ topic.title }}</a> 
</div>

下，是時候在我的控制器來創建功能：

// Didn't forget to inject it! 
homeCtrl.$inject = ['$scope', '$animate']; 
function homeCtrl($scope, $animate) {... 


    vm.highlight = function(tag) { 
     if (typeof vm.target !== 'undefined') { 
      $animate.removeClass(vm.target, 'selected'); 
     } 
     vm.target = angular.element(document.getElementById(tag)); 
     $animate.addClass(vm.target, 'selected'); 
    }; 


...}

最後一些CSS創建漂亮的背景閃光效果：

CSS

@-webkit-keyframes highlight { 
    0% { 
     background-color: transparent; 
     opacity:1; 
    } 
    50% { 
     background-color: rgba(64,64,64,0.2); 
    } 
    100% { 
     background-color: transparent; 
    } 
} 

.selected { 
    -webkit-animation-name: highlight; 
    -webkit-animation-duration: 1000ms; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: highlight; 
    -moz-animation-duration: 1000ms; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: linear; 
}

摘要

因此，技巧是使用ngAnimate'saddClass和removeClass的ngClick函數傳遞錨鏈接作爲參數，以便能夠正確地找到內正確的目標div與相同的id（作爲錨鏈接），從而改變了類，同時也刪除了以前的div類，如果需要的話可以複製效果。

來源

2016-10-12 15:37:46 Kenny

Angular - Anchor頁內鏈接 - Flash背景

回答

相關問題