jquery - css/jquery/velocity.js 删除效果

Question

我想用 css/jquery/velocity.js 模拟 powerpoint 的删除效果。

期望的效果:https://www.youtube.com/watch?v=VSBB0wfccws

---

我尝试使用 css3 掩码 (svg/gradient) 但没有成功。

这是一个没有 mask 的简单删除效果:

http://plnkr.co/edit/Sys20pLwGb1MK8gBiX5a?p=preview

$(function(){
  $('.second').velocity({    
    width: ['100%', 0]
  },{
    duration: 2000,
    loop: true
  })
})

---

它最好适用于所有现代浏览器。

Answer 1

非 velocity.js 技巧

css3 - 带有 -webkit-/-moz-/-o-

仅适用于 chrome(我认为)，你需要重写它(为此你可以在这里找到一些帮助:http://www.w3schools.com/css/css3_transitions.asp 和互联网 :))，但第二个例子是做你需要的(适用于 chrome 中的悬停) http://css-tricks.com/webkit-image-wipes/

据我所知，mask 属性仅适用于 safari 和 chrome，也许也适用于 opera。

jQuery

像你需要的东西:http://jquery.malsup.com/cycle/wipe.html

也许你搜索这个:Nivo slider effectslicedownright

其他有用的:

Jquery image transition left to right and fade in, in a slideshow

CSS fade left to right

Fade effect left to right on a image

CSS Fade Between Background Images on Hover

在我看来，如果有一个有效，就使用它，不要再写一个。大多数情况下，您可以找到很多相关结果，如果您搜索以下内容:jQuery fade left to right | jQuery 在两个图像之间从左到右淡入淡出

velocity.js 技巧

也许答案就在这里:http://julian.com/research/velocity/在淡入淡出和滑动部分

或在这里:http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/交错部分看起来像那样。