这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。
import comA from './components/a.vue' import comB from './components/b.vue' export default { components: {comA, comB}, data () { return { show: true } }, methods: {// 动画执行的起始位置 beforeEnter: function (el) { $(el).css({ left: '50px', opacity: 0 }) }, enter: function (el, done) { $(el).animate({ left: '200px', opacity: 1 }, { duration: 1500, complete: done }) }, leave: function (el, done) { $(el).animate({ left: '500px', opacity: 0 }, { duration: 1500, complete: done }) } } }.animate-p { position: absolute; top: 100px; left: 0;}i am show
登录后复制
当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画
js过渡动画
在学习饿了么外卖app时,发现这样写也可以,
给要执行动画的标签添加transition
在CSS代码中
.detail ...... &.fade-transition opacity: 1 background: rgba(7, 17, 27, 0.8) &.fade-enter,&.fade-leave opacity: 0 background: rgba(7, 17, 27, 0)登录后复制
这样就可以简单的实现一个背景透明度过度的动画
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
立即学习“前端免费学习笔记（深入）”；
Vue.js的计算属性和数据监听
Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定
Vue.js的列表数据的同步更新方法
Vue.js的列表渲染 v-for 数组 对象 子组件
以上就是Vue.js之js实现过渡的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783479.html
赞 (0)
