Question

我正在尝试为此代码添加过渡效果。它的作用是当你点击色板颜色时，产品会从原来的黑色变为另一种颜色。然而，转型并不容易，所以这是一个非常艰难的过渡。我在哪里添加过渡？

/* create fsm */
FsmTurnstile fsm = FSM_TURNSTILE_CREATE();
/* create fopts */
FsmTurnstileFopts fopts = {
    .msg = ""
};
/* initialize input */
eFsmTurnstileInput input = EFSM_TURNSTILE_NOINPUT;

/* main loop */
for (;;) {
    /* wait for timer signal, inputs, interrupts, whatever */
    /* optionally set the input (my_input = EFSM_TURNSTILE_IN_PUSH for example) */
    /* run state machine */
    my_fsm.run(&my_fsm, &my_fopts, my_input);
}

Answer 1

实现所需效果的最简单方法是将两个图像div放在一起。将较低的div设置为目标图片，然后淡出顶部的div。顶部div淡出后，将其切换到目标图像并立即恢复其不透明度。由于您的帖子被标记为jquery，我将在我的示例中使用其过渡函数（对于样本代码，请使用TinyGiant）。

function changeImage(url) {
  $img = $('#imgDisp');
  $imgfi = $('#imgDispFadeIn');
  $imgfi.attr('src', url);
  $img.fadeOut(1000, function() {
    $img.attr('src', url)
    $img.fadeIn(0);
  });
}

span {
  display: inline-block;
}
#imgContainer {
  position: relative;
  width: 100px;
  height: 100px;
}
#imgDisp,
#imgDispFadeIn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#imgDisp {
  z-index: 10;
}
.swatch {
  width: 25px;
  height: 25px;
}
.swatch.pink {
  background: pink;
}
.swatch.black {
  background: black;
}
.swatch.brown {
  background: brown;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
</script>
<span onclick="changeImage('//lorempixel.com/200/200/nature/1')">  
  <div class="swatch pink"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/2')">  
  <div class="swatch black"></div>
</span>
<span onclick="changeImage('//lorempixel.com/200/200/nature/3')"> 
  <div class="swatch brown"></div>
</span>
<div id="imgContainer">
  <img id="imgDisp" src='//lorempixel.com/200/200/nature/1' />
  <img id="imgDispFadeIn" src="" />
</div>

过渡效应onClick

1 个答案: