我有一个 AngularJS 应用程序，它有一个容器 Div，可以包含许多宽度不同的子项。 child 的宽度通常大于 parent 的宽度。用户可以水平滚动以访问/查看子 div 及其包含的数据，但是我希望通过在用户单击特定子容器时添加动画来使生活更轻松/更酷，容器向左滚动，因此子容器处于零位置的容器。这一切都很酷，但是在点击之后无法访问(或者应该无法访问)被点击的 child 之前的先前内容，我希望允许用户向后滚动以查看原始内容。我认为这可能是我的实现有问题，我使用了 css3 转换/翻译而不是滚动父级的左侧属性。谁知道我如何让用户滚动回动画隐藏的内容？
我在 JS Bin 上做了一个虚拟人，我将在下面添加我的代码以强调我的问题。非常感谢任何想法、想法或解决方案。
要了解我的问题，请尝试以下操作:
- 点击“George”的信息，然后点击“Ringo”。
- 观看动画后，尝试手动向后滚动以查看 John 和 Paul，他们已被切断和/或丢失(是的，为了简单起见，我在模型中使用了披头士乐队，而不是实际的应用程序)
这是 Js Bin:https://jsbin.com/fikuli/edit?html,js,output
请注意，我不想使用 jQuery。
非常非常感谢您的建议!
angular.module('cssStuff', [])
.controller('MainCtrl', ['$scope', function ($scope) {
}])
.directive('moveToThis', function () {
'use strict';
return {
restrict: 'A',
link: function (scope, element) {
var animationDistance = null;
element.bind('click', function (ev) {
console.log('I have been clicked');
// find the distance of the 'beatle' div that was clicked and scroll / animate to the zero position of the beatle-container
// what was clicked...
var clickedBeatle = findUpDom(ev.target, 'data-beatle');
if (clickedBeatle !== false) {
// get position of clicked DIV to container
if(animationDistance === null ) {
console.log('is null');
animationDistance = (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left);
} else {
console.log('already exisits');
animationDistance = animationDistance + (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) || (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) ;
}
console.log(animationDistance, element[0].children[1].children[0].scrollLeft);
element[0].children[1].children[0].style['transition'] = '1s ease-in-out';
element[0].children[1].children[0].style['animation-iteration-count'] = '1';
element[0].children[1].children[0].style['animation-fill-mode'] = 'forwards';
element[0].children[1].children[0].style['transform'] = 'translate(' + animationDistance + 'px)';
}
});
var findUpDom = function (elem, attribute) {
if (elem.getAttribute(attribute)) {
return elem;
} else {
while (elem.parentNode) {
elem = elem.parentNode;
if (elem.getAttribute && elem.getAttribute(attribute)) {
return elem;
break;
}
}
return false;
}
};
}
};
}); body {
font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: aliceblue;
}
.beatle-intro {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
background-color: white;
height: 500px;
padding-left: 10px;
padding-right: 10px;
width: 25%;
}
.beatle-container {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
white-space: nowrap;
width: 70%;
background-color: white;
height: 500px;
}
.beatle {
width: 300px;
max-width: 300px;
display: inline-block;
white-space: initial;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">
<div data-move-to-this>
<div class="beatle-intro">
<h3>Here is some info about people associated with the Beatles </h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle-container">
<div>
<div class="beatle" data-beatle="john">
<h3>John</h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="paul">
<h3>Paul</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="george">
<h3>George</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="ringo">
<h3>Ringo</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="yoko">
<h3>Yoko</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="pete">
<h3>Pete Best</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="george-m">
<h3>George Martin</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="brian">
<h3>Brian Epstein</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="neil">
<h3>Neil Aspinall</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
</div>
</div>
</div>
</body>最佳答案
只要您使用转换，我就不会期望内容可以再访问，因为它在容器的边界之外。尝试为容器的 scrollLeft 属性设置动画。
(改编自Cross browser JavaScript (not jQuery...) scroll to top animation)
function scrollTo(element, to, duration) {
var start = element.scrollLeft,
change = to - start,
currentTime = 0,
increment = 20;
var animateScroll = function(){
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollLeft = val;
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
angular.module('cssStuff', [])
.controller('MainCtrl', ['$scope', function ($scope) {
}])
.directive('moveToThis', function () {
'use strict';
var beatleContainer = document.querySelector('.beatle-container');
var xPositionInBeatleContainer = xPositionInContainer(beatleContainer);
function xPositionInContainer(container) {
var containerBox = container.getBoundingClientRect();
return function(el) {
var elBox = el.getBoundingClientRect();
return elBox.left - containerBox.left + container.scrollLeft;
};
}
return {
restrict: 'A',
link: function (scope, element) {
element.bind('click', function (ev) {
scrollTo(beatleContainer, xPositionInBeatleContainer(ev.target), 400);
});
}
};
});body {
font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: aliceblue;
}
.beatle-intro {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
background-color: white;
height: 500px;
padding-left: 10px;
padding-right: 10px;
width: 25%;
}
.beatle-container {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
white-space: nowrap;
width: 70%;
background-color: white;
height: 500px;
}
.beatle {
width: 300px;
max-width: 300px;
display: inline-block;
white-space: initial;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">
<div data-move-to-this>
<div class="beatle-intro">
<h3>Here is some info about people associated with the Beatles </h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle-container">
<div>
<div class="beatle" data-beatle="john">
<h3>John</h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="paul">
<h3>Paul</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="george">
<h3>George</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="ringo">
<h3>Ringo</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="yoko">
<h3>Yoko</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="pete">
<h3>Pete Best</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="george-m">
<h3>George Martin</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="brian">
<h3>Brian Epstein</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="neil">
<h3>Neil Aspinall</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
</div>
</div>
</div>
</body>关于javascript - AngularJS + CSS3 TransformAnimation 向左滑动时我们会丢失内容吗？无法向后滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31743591/