分类：transition

2021
06-28

Vue transition实现点赞动画效果的示例

效果一览爱心效果材料：爱心图标两个，没有我这种icon组件的用png图片代替<transition:name="isLike?'zoom':''"mode="out-in"><!--爱心图标--><icondata="@icon/like.svg"color="#FF0000"v-if="isLike"key="like"></icon><icondata="@icon/unlike.svg"color="#333333"v-elsekey="unlike"></icon></transition>因为在点赞时有动画，取消点赞不要动画，所以transition的name属性需要根据... 继续阅读 >

2021
04-27

如何在Vue中实现Svelte的Defer Transition

最近观看了RichHarris的<RethinkingReactivity>视频，惊叹于Svelte框架的高效同时，还发现了Vue所不具备的一些关于动画的原生支持—defertransitions.先看看Svelte所谓的defertransition的效果吧。这是使用Svelte做的TodoDemo应用。整个todo分成3个部分。输入部分，todo列表和done列表。当点击todo列表中的条目时，相应条目会被“移动”到done列表，反之亦然。在这里，条目从一个列表转移到另一个列表，不是很突兀的闪现，而... 继续阅读 >

2020
09-24

JavaScript实现移动端带transition动画的轮播效果

JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即：1.确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。2.对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一... 继续阅读 >