jquery - 单击时的CSS不透明度过渡

Question

有什么方法可以让这个图像使用定义的 CSS 过渡淡入淡出吗？现在它只是弹出到完全不透明。

var makeImage = function() {
    $('#image').remove();

    $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />');

    var img = $('#image')[0];
    console.log(img.style);
    img.style["opacity"] = 1;
  };

.fadeIn {
    opacity: 0;
    -moz-transition: opacity 5.5s ease 0.300s;
    -webkit-transition: opacity 5.5s ease 0.300s;
    -o-transition: opacity 5.5s ease 0.300s;
    transition: opacity 5.5s ease 0.300s;
  }

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<title>Fade Example</title>
<input id="makeButton" type="button" value="Make and fade" onclick="makeImage()" ; />

编辑:我意识到 jquery 提供了一个 fadeIn 函数。我很遗憾在这个例子中使用了 jquery，因为重点是使用 CSS 过渡属性来完成它。

Answer 1

由于您在脚本中将不透明度设置为完全 ( 1 = 100% )，因此它会弹出到完全不透明度:

img.style["opacity"] = 1;

我不确定 CSS 转换是如何工作的，但既然你正在使用 jQuery:

var makeImage = function() {
  $('#image').remove();

  $(document.body).append('<img id="image" class="fadeIn" src="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1" />');

  var img = $('#image')[0];
  console.log(img.style);
  img.fadeIn(5500);
};