vue实现界面滑动效果
更新时间：2021年07月16日 15:16:13 作者：Stephanie翟
这篇文章主要为大家详细介绍了vue实现界面滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现界面滑动效果的具体代码，供大家参考，具体内容如下
项目需求+效果图
1.项目需求
【点击底部导航栏，切换页面的时候，会有一个滑动的效果】
2.效果图
代码+关键代码解析
1.代码
Botnav.vue导航栏界面
<template>
<div>
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
<template>
<script>
export default {
data () {
return {
// 从左往右滑动
transitionName:'slide-right',
}
</script>
<style lang="stylus">
.Router
position absolute
width 100%
transition all 0.8s ease
.silde-left-enter,.slide-right-leave-active
opacity 0
-webkit-transform translate(100%,0)
transform translate(100%,0)
.silde-left-leave-active,.slide-right-enter
opacity 0
-webkit-transform translate(-100%,0)
transform translate(-100%,0)
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,下面这篇文章主要给大家介绍了关于vue3+koa实现文件上传功能的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了解决vue项目axios每次请求session不一致的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章主要介绍了vue.js根据代码运行环境选择baseurl的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
Vuex是一个专门为Vue.js应用程序开发的状态管理模式，这篇文章主要介绍了Vuex的基本概念、项目搭建以及入坑点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
这篇文章主要为大家详细介绍了Vue入门实战之天气预报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要介绍了详解vue-router基本使用，详细的介绍了vue-router的概念和用法，有兴趣的可以了解一下。2017-04-04
Vue.js devtool插件最近在开发人员中很火，这篇文章主要为大家详细介绍了Vue.js devtool插件安装后无法使用，出现提示“vue.js not detected”的解决办法2017-11-11
这篇文章主要介绍了vue页面批量引入组件,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论