Question

我有两个div /列，左边是锚点列表，右边是内容段落。单击锚点（或div）时，它将滚动到右列中的相应内容。

我想加倍努力，在目标背景上添加一点闪光灯，这样用户就可以更轻松地找到它。我可以使用以下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;
}

Answer 1

所以这真的很棘手，但我得到的却是我想要的效果。

我必须使用addClass API的removeClass和ngAnimate方法。所以首先我必须添加依赖项：

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>

接下来是时候在我的控制器中创建这个功能了：

JS

// 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创建了漂亮的背景flash效果：

<强> 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's函数中使用addClass removeClass和ngClick传递锚链接作为参数，以便它可以正确找到正确的目标具有相同id（作为锚链接）的div因此改变了类，同时如果需要也删除了前一个div类，以便可以再现效果。

角度 - 锚页内链接 - Flash背景

1 个答案: