Question

我正在尝试使用javascript css和html在页面上转换一些图像。我有javascript设置添加css类名称来完成转换。但是，当我加载页面时，图像会跳转而不是转换。任何帮助都会非常感激，因为我很困惑。这是我的代码：

window.onload;



var movepic1 = document.getElementById("pic1");
console.log(movepic1);

function classChange(){

movepic1.className = "trans";
    
}

console.log(movepic1);

setTimeout(classChange, 3000);

.fold_pics{
    margin: 0 0 0 180px;
    padding-top: 10%;
    display: inline-block;
    width:40%;
    position:
}
.fold_pics img{
    display: inline-block;
    
    
}
#pic1{
    position: relative;
    right: 100%;
    width: 30px;
    float: left;
    opacity: .3;
    
    /*transition code */
    -webkit-transition: right 3.0s ease;
    -moz-transition: right 3.0s ease;
    transition: right 3.0s ease;
        
     -webkit-transition: opacity 3.0s ease;
    -moz-transition: opacity 3.0s ease;
    transition: opacity 3.0s ease;
}
#pic1.trans{
    position: relative;
    right: 50%;
    width: 33%;
    float: left;
    opacity: 1.0;
    
    /*transition code */
    -webkit-transition: right 3.0s;
    -moz-transition: right 3.0s;
    transition: right 3.0s
        
    -webkit-transition: opacity 3.0s;
    -moz-transition: opacity 3.0s;
    transition: opacity 3.0s;
    
}
#pic2{
    position: relative;
    right: 64%;
    width: 33%;
    opacity: .89;
}
#pic3{
    position: relative;
    left:20%;
    width: 33%;
    float: left;
}

 <div class="fold_pics">
                
        <img id="pic3" src="media/Landing_Page_Pics/Buildings%20Pic.png" alt="pic3">
            
        <img id="pic2" src="media/Landing_Page_Pics/Hardware%20Pic.png" alt="pic2">
            
            
        <img id="pic1" src="media/Landing_Page_Pics/Data%20Pic.png" alt="data_pic">
            
        </div>

提前致谢。

Answer 1

您基本上已使用不透明度转换覆盖了位置转换。你需要用逗号分隔它们，而不是有多个转换属性，比如这......

transition: right 3.0s, opacity 3.0s;

此外，您不需要将过渡属性放在#pic1和#pic1.trans中 - 它只需要位于#pic1.trans

Answer 2

您正在使用right覆盖opacity转换。

这是您使用多个属性的方式：

transition: right 3.0s ease, opacity 3.0s ease;

如果您需要{strong>全部：

，请使用all

transition: all 3.0s ease;

运行示例：

＆＃13;

window.onload;



var movepic1 = document.getElementById("pic1");
console.log(movepic1);

function classChange() {

  movepic1.className = "trans";

}

console.log(movepic1);

setTimeout(classChange, 3000);

＆＃13;

.fold_pics {
  margin: 0 0 0 180px;
  padding-top: 10%;
  display: inline-block;
  width: 40%;
  position:
}

.fold_pics img {
  display: inline-block;
}

#pic1 {
  position: relative;
  right: 100%;
  width: 30px;
  float: left;
  opacity: .3;
  /*transition code */
  transition: right 3.0s ease, opacity 3.0s ease;
}

#pic1.trans {
  position: relative;
  right: 50%;
  width: 33%;
  float: left;
  opacity: 1.0;
}

#pic2 {
  position: relative;
  right: 64%;
  width: 33%;
  opacity: .89;
}

#pic3 {
  position: relative;
  left: 20%;
  width: 33%;
  float: left;
}

＆＃13;

<div class="fold_pics">

  <img id="pic3" src="media/Landing_Page_Pics/Buildings%20Pic.png" alt="pic3">

  <img id="pic2" src="media/Landing_Page_Pics/Hardware%20Pic.png" alt="pic2">


  <img id="pic1" src="media/Landing_Page_Pics/Data%20Pic.png" alt="data_pic">

</div>

＆＃13;

Answer 3

发现我的问题。我编写的Chrome开发者工具并没有更新我的代码。通过使用Ctrl + F5代码更新并正常工作。感谢所有帮助我提出建议的人。您的输入增加了我的代码组织。

Javascript转换“跳转”而不是转换

3 个答案: