首页 新闻 会员 周边

js和transition

0
悬赏园豆：20 [待解决问题]

请教大牛们一个问题：

　　用js在body上添加一个元素后在触发css中定义好的transition

　　比如：

div{　　
　　position:absolute;
　　top:-100px;
　　transition:top 1s;
}
.in{
     top:100px;         
}

 

$("<div>demo</div>").appendTo("body").addClass("in")

怎样添加元素后就直接显示在top：100的位置了 有什么办法让元素添加后触发transition的效果吗(PS:不用 jquery的animate能实行吗)

~吉尔伽美什的主页 ~吉尔伽美什 | 初学一级 | 园豆：165
提问于：2012-11-09 22:58
< >
分享
所有回答(2)
0 
div{　　
　　position:absolute;
　　top:-100px;
　　transition:top 1s;
}
.in{
     top:100px; 
     transition:top 1s;        
}
田林九村 | 园豆：2367 (老鸟四级) | 2012-11-10 08:34
1

完全可以，很简单

<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'/>
   <title></title>
   <meta name ='keywords' content=''/>
   <meta name = 'decription' content=''/>
   <script type="text/javascript" src= "jquery.js"></script>
   <style type="text/css">
.out{
    top:-100px;
    position:absolute;
     width:100px;
     height:100px;
     border:1px red solid;
}
.in{        
     top:100px;   
      -webkit-transition:top 4s ease;
      -ms-transition:top 4s ease;
      -o-transition:top 4s ease;
      -moz-transition:top 4s ease;
      position:absolute;
       width:100px;
     height:100px;
     border:1px red solid;
}
   </style>
</head>
<body>
<script type="text/javascript">
 $("<div class='out'></div>").appendTo("body");
 setTimeout(function(){$('.out').removeClass('out').addClass('in')},1000);
</script>
</body>
</html>

没优化代码，凑合着看吧

beat it | 园豆：202 (菜鸟二级) | 2013-01-04 16:18
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。