如何使用JavaScript触发CSS翻译动画
[英]How to trigger css translate animation with javascript
问题描述
我正在尝试创建一个手动幻灯片放映，该动画将左右四个图像的动画转换为动画，具体取决于所按下的按钮来显示四个新图像并隐藏旧图像。 除了无法弄清楚如何为过渡设置动画之外，所有逻辑均有效。 我已经在我的JavaScript文件中尝试了各种方法，例如album_covers[n].style.transition = "translate 1.0s linear 0s"; （如下面的代码“ album_covers”所示，该数组是由html的“ album-cover”类选择的所有图像组成的数组）。 我不确定我尝试做事的方式是否可行，或者我是否必须诉诸其他技术（例如关键帧）。 对CSS / Javascript新手有什么见解？
的HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="image-container">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/008/786/475/cover-2153.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
<img class = "album-cover"src="https://images.8tracks.com/cover/i/009/883/162/tumblr_nra20qoAw41qzp1j8o2_1280-9783.gif?rect=59,0,432,432&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/009/564/192/7329ec2b80938b862b24175cf8445ea8-1868.jpg?rect=0,73,500,500&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/009/732/575/7841098526_510abd2ec7_o-7993.jpg?rect=92,0,1536,1536&q=98&fm=jpg&fit=max&w=1024&h=1024">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/000/655/115/46099_10151436554292625_1248862229_n-5573.jpg?rect=133,0,633,633&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/010/077/003/tumblr_o77rkhnJGF1vutacho1_500-6413.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/009/919/152/25820d4a20ddca732d0220000b0fa723-8821.jpg?rect=120,0,398,398&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/001/693/941/Sherlock_S03E03_1080p_kissthemgoodbye_net_5000-3819.jpg?rect=0,0,1072,1072&q=98&fm=jpg&fit=max&w=1024&h=1024">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/009/149/601/405867_2930131703040_1104257610_n-956.jpg?rect=159,0,641,641&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/010/158/250/Angbang-smut_copy-7358.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/010/341/098/Kylux_copy-again-4632.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
<img class = "album-cover" src="https://images.8tracks.com/cover/i/010/279/809/0aa2af1665e66735f5a9b50e16051274-4133.jpg?rect=0,0,640,640&q=98&fm=jpg&fit=max">
</div>
<button id="left-button">
<i class="fa fa-chevron-left"></i>
</button>
<button id="right-button">
<i class="fa fa-chevron-right"></i>
</button>
</body>
</html>
的CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.image-container {
height: 300px;
width: 1260px;
margin: 50px 40px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
}
.image-container img {
height: 100%;
margin-left:5px;
margin-right: 5px;
transform: translate(0%, 0px);
}
Java脚本
var counter = 0;
var max_album_sections = 2;
var album_covers = document.getElementsByClassName("album-cover");
console.log(album_covers);
document.getElementById("left-button").addEventListener("click", function() {navGallery(-1)});
document.getElementById("right-button").addEventListener("click", function() {navGallery(1)});
function translateImage() {
var amount = String(-418*counter) + "%";
for(var n = 0; n < album_covers.length; n++) {
album_covers[n].style.transition = "translate 1.0s linear 0s";
album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");
}
}
function navGallery(increment) {
if(counter < max_album_sections && counter > 0) {
counter = counter + increment;
translateImage();
}
if(counter == max_album_sections && increment < 0) {
counter = counter + increment;
translateImage();
}
if(counter == 0 && increment > 0) {
counter = counter + increment;
translateImage();
}
}
2 个解决方案
解决方案1
2 已采纳 2018-02-07 06:07:53
有两件事要注意。
首先，您需要转换transform属性，而不是translate值。
其次，更重要的是，通过在下一行使用setAttribute ，您将覆盖style属性具有的所有先前值。 这包括您刚刚设置的过渡。
这就是通常不推荐使用setAttribute方法的原因，特别是对于style属性。
因此，请使用以下几行修复javascript：
album_covers[n].style.transition = "transform 1.0s linear 0s";
album_covers[n].style.transform = "translateX(" + amount + ")";
代替
album_covers[n].style.transition = "translate 1.0s linear 0s";
album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");
另外，您只需删除要应用动画的javascript行，然后添加CSS规则
.album-cover{
transition:transform 1s linear;
}
解决方案2
0 2018-02-07 06:03:15
您要设置过渡的css属性是变换，而不是转换
album_covers[n].style.transition = "transform 1.0s linear 0s";
如何使用javascript / jquery触发点击延迟的CSS动画？
[英]How to trigger css animation w/ delay on click using javascript/jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.