AngularJS + CSS3变形时，我们失去了内容?无法向后滚动
AngularJS + CSS3 TransformAnimation when sliding left we lose content? Cannot scroll back?
我有一个AngularJS应用程序，它有一个容器div，可以包含许多宽度的许多子节点。子节点的宽度通常大于父节点的宽度。用户可以水平滚动来访问/查看子div和它们包含的数据，但是我希望通过添加一个动画来使生活更容易/更酷，当用户单击特定的子容器时，子容器向左滚动，因此子容器处于容器的零位置。这一切都很酷，但是以前的内容，是之前的点击子是不可访问的(或应该是不可访问的)点击后，我希望允许用户滚动回看原始内容。我认为这可能是我实现的问题，我使用css3转换/翻译，而不是滚动父属性的左侧。有人知道我如何允许用户滚动回被隐藏的动画内容吗?
我在JS Bin上做了一个假人，我将在下面添加我的代码来强调我的问题。任何想法、想法或解决方案都非常感谢。
要了解我的问题，请尝试以下操作:
- 点击"George"的信息，然后是"Ringo"。
- 看到动画后，尝试手动滚动回看约翰和保罗，他们已经被切断和/或丢失(是的，我在我的模型中使用披头士而不是我的实际应用程序简单)
这是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属性做成动画。
(改编自跨浏览器JavaScript(不是jQuery…)滚动到顶部动画)
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不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动）.
- 为什么在变形之前不缺少Fx
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS）上的jQuery平滑滚动问题
- CSS-若窗口太小，滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏）浏览器滚动条
- JavaScript上下滚动不可预测
- 滚动和表格
- 谷歌地图劫持了iphone's滚动(触摸事件）-如何恢复
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 循环滚动数组
- AngularJS + CSS3变形时，我们失去了内容?无法向后滚动
