西安网站 技术支持牛商网,重庆新增10个高风险区,食品营销型网站,西安短视频培训班哪个好Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if , v-show 和 v-repeat。同时#xff0c;vm 实例的 $appendTo() , $before() , $after() 和 $remove() 方法…Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if , v-show 和 v-repeat。同时vm 实例的 $appendTo() , $before() , $after() 和 $remove() 方法也会触发动画。 定义动画的方法有三种 CSS transitionCSS animationJavaScript 函数CSS Transition 要使用 CSS Transition 动画只需要在目标元素上添加 v-transition 指令 p classmsg v-ifshow v-transitionHello!/p 然后你需要为目标元素定义两个 CSS 类 .v-enter 和 .v-leave . 这其中 .v-enter 代表元素刚刚被插入 DOM 瞬间的状态。它会在插入前被添加然后 Vue.js 会强制浏览器刷新视图然后 v-enter 会被立刻移除从而触发 transition。.v-leave 代表元素即将被从 DOM 中移除的瞬间的状态。Vue.js 会在侦听到 transitionend 事件以后移除它。需要注意的是你得确保该元素在添加这两个类的时候会触发 CSS transition不然 Vue.js 侦听不到 transitionend 事件动画就卡在那里了。 .msg {transition: all .3s ease;height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } .msg.v-enter, .msg.v-leave { height: 0; padding: 0 10px; opacity: 0; } 现在当 show 变化的时候Vue.js 会插入/移除该元素并自动在合适的时候添加 CSS 类。 CSS Animation CSS Animation 使用方式和 transition 大同小异换成使用 v-animation 指令不同的地方是 v-enter 现在不是在插入后立刻移除而是在侦听到 animationend 事件后才移除。 p classanimated v-ifshow v-animationLook at me!/p CSS 里你需要定义两个动画 keyframes分别对应进场和出场动画这里省略了webkit前缀 .animated {display: inline-block;
}.animated.v-enter { animation: fadein .5s; } .animated.v-leave { animation: fadeout .5s; } keyframes fadein { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } keyframes fadeout { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } } JavaScript 函数动画 JS 函数动画需要通过 Vue.effect 方法来注册一个效果包括一个进场函数和一个出场函数 Vue.effect(my-effect, {enter: function (el, insert, timeout) { // insert() 会将元素插入 DOM }, leave: function (el, remove, timeout) { // remove() 会将元素移除出 DOM } }) p v-effectmy-effect/p 第三个参数 timeout 是一个 Vue.js 版本的 setTimeout 函数。使用方法完全一样但使用这个函数的好处是当一个元素的状态切换过快上一个动画函数设置的 timer 还没有触发就进入下一个动画函数的时候 Vue.js 会确保之前未触发的 timer 都被取消不需要开发者手动管理 timer。 过渡动效 router-view 是基本的动态组件所以我们可以用 transition 组件给它添加一些过渡效果 transitionrouter-view/router-view /transition transition 的所有功能 在这里同样适用。 单个路由的过渡 上面的用法会给所有路由设置一样的过渡效果如果你想让每个路由组件有各自的过渡效果可以在各路由组件内使用 transition 并设置不同的 name。 const Foo {template: transition nameslidediv classfoo.../div/transition
}const Bar {template: transition namefadediv classbar.../div/transition
}基于路由的动态过渡 还可以基于当前路由与目标路由的变化关系动态设置过渡效果 !-- 使用动态的 transition name --
transition :nametransitionName router-view/router-view /transition // 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {$route (to, from) {const toDepth to.path.split(/).length const fromDepth from.path.split(/).length this.transitionName toDepth fromDepth ? slide-right : slide-left } } 查看完整例子 这里. 转载于:https://www.cnblogs.com/avon/p/6030875.html
