2025年2月5日

transtition 数字动态效果

摘要： <template> <div> <input v-model="num.current" type="number" step="20"/> <div>{{ num.tweenedNumber }}</div> </div> </template> <script setup lang='ts'> 阅读全文

posted @ 2025-02-05 21:37 ChoZ 阅读(2) 评论(0) 推荐(0) 编辑

transtition-group 过渡属性

摘要： <template> <button @click="random">随机</button> 通过move-class属性,设置元素移动时的动画效果 <transition-group tag="div" move-class="mm" class="warp"> <div v-for="item 阅读全文

posted @ 2025-02-05 21:14 ChoZ 阅读(1) 评论(0) 推荐(0) 编辑

transition-group

摘要： <template> <div @click="add">add</div> <div @click="pop">pop</div> transition标签,可以对单个元素进行动画处理,并且只是对元素的添加和删除进行动画处理 transition-group标签,可以对多个元素进行动画处理,并且只 阅读全文

posted @ 2025-02-05 16:02 ChoZ 阅读(3) 评论(0) 推荐(0) 编辑

transition appear

摘要： <template> <div @click="flag = !flag">switch</div> <transition appear appear-from-class="from" appear-active-class="active" appear-to-class="to"> <div 阅读全文

posted @ 2025-02-05 15:26 ChoZ 阅读(2) 评论(0) 推荐(0) 编辑

transition生命周期配合gsap

摘要： <template> <div @click="flag = !flag">switch</div> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter 阅读全文

posted @ 2025-02-05 15:14 ChoZ 阅读(4) 评论(0) 推荐(0) 编辑

transition配合animate.js

摘要： <template> <div @click="flag = !flag">switch</div> 不根据name来设置动画效果,指定自定义的class名 <transition :duration="{ enter: 1000, leave: 5000 }" enter-active-class 阅读全文

posted @ 2025-02-05 13:44 ChoZ 阅读(2) 评论(0) 推荐(0) 编辑

transition

摘要： <template> <div @click="flag = !flag">switch</div> <transition name="fade"> <div v-if="flag" class="box">Hello World</div> </transition> </template> < 阅读全文

posted @ 2025-02-05 13:07 ChoZ 阅读(7) 评论(0) 推荐(0) 编辑

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示