时间:2021-07-01 10:21:17 帮助过:2人阅读
<template> <div> <button @click="show = !show">Toggle</button> <div class="ab"> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false" > <p class="animate-p" v-show="show">i am show</p> </transition> </div> </div></template><script> 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 }) } } }</script><style>.animate-p { position : absolute; top: 100px; left: 0; }</style>
当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画
js过渡动画
在学习饿了么外卖app时,发现这样写也可以,
给要执行动画的标签添加transition
<div v-show="detailShow" class="detail" transition="fade">
在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)
这样就可以简单的实现一个背景透明度过度的动画
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Vue.js的计算属性和数据监听
Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定
Vue.js的列表数据的同步更新方法
Vue.js的列表渲染 v-for 数组 对象 子组件
以上就是Vue.js之js实现过渡的详细内容,更多请关注Gxl网其它相关文章!