如何使用JavaScript触发CSS翻译动画 [英] How to trigger css translate animation with javascript
问题描述
我正在尝试创建一个手动幻灯片放映，该动画将左右四个图像的转换动画化，具体取决于所按下的按钮来显示四个新图像并隐藏旧图像.所有的逻辑工作原理，但我无法弄清楚如何为过渡设置动画.我已经在我的javascript文件中尝试过各种操作，例如 album_covers [n] .style.transition ="translate 1.0s linear 0s"; (如下面的代码"album_covers"是一个数组)由html中相册封面"类选择的所有图片组成).我不确定我尝试做事的方式是否可行，或者我是否必须诉诸其他技术(例如关键帧).对CSS/Javascript newb有什么见解?
I am trying to create a manual slideshow which animates a translation of four images left or right depending on which button is pressed uncovering four new ones and hiding the old. All of the logic works except that I can't figure out how to animate the transition. I have tried various things in my javascript file such as album_covers[n].style.transition = "translate 1.0s linear 0s"; (as you will see in the below code 'album_covers' is an array consisting of all images selected by the class of 'album-cover' from the html). I'm not sure if the way I am trying to do things is possible or if I will have to resort to another technique such as keyframes. Any insights for a CSS/Javascript newb?
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);
}
JavaScript
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();
}
}
推荐答案
有两件事需要注意.
首先，您需要转换 transform 属性，而不是 translate 值.
First off, you need to transition the transform property, not the translate value.
第二，更重要的是，通过在下一行使用 setAttribute ，您将覆盖 style 属性具有的所有先前值.这包括您刚刚设置的过渡.
Second and more importantly, by using setAttribute on the very next line, you're overriding any previous value the style attribute had. And that includes the transition you just set.
这就是为什么通常不建议使用 setAttribute 方法的原因，特别是对于 style 属性.
That's why the setAttribute method is generally not recommended, specially for the style attribute.
因此，使用以下几行来修复javascript:
So fix the javascript with these lines:
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规则
Alternatevely, you can just delete the line of javascript where you're trying to apply the animation, and add a CSS rule instead
.album-cover{
transition:transform 1s linear;
}
这篇关于如何使用JavaScript触发CSS翻译动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
