Vue——09-02Vue过渡以及简单的动画实现

简介: Vue过渡以及简单的动画实现

Vue过渡

Vue动画相比较css中的动画比较复杂一些,需要用到新的类名

下面是官网给出的解释:

过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

v-leave-to:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

43d78760d393c17a4602f8610dbbb4c8.png

看个例子:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <button type="button" @click="show=!show">点击我及消失</button>
    <h1 v-if="show">Nanchen消失不见</h1>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el:'#app',
    data(){
      return{
      show:true,
      }
    },
    })
  </script>
  </body>
</html>

效果如下:

0110957266154197a3bcc54e63ae7e13.gif

这样显得比较僵硬,这时就需要一个过渡效果来解决生硬问题

把需要进行过渡的标签外套上一个<transition>,例如:

<transition>
  <h1 v-if="show">Nanchen消失不见</h1>
</transition>

这里写上name以便对过渡效果名相匹配,如果不写name,则需在类名前加v-,这里建议写上name防止多个动画发生冲突

<transition name="fade">
  <h1 v-show="isShow">Nanchen消失不见</h1>
</transition>

CSS样式:

.fade-enter,
    .fade-leave-to {
    opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active {
    transition: opacity 3s;
    }

效果如下:

f9867ab2fabe4dccb65e07356d085b36.gif

Vue动画

CSS 动画用法类似 CSS 过渡,但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style type="text/css">
  button{
    display: block;
  }
  h1{
    border: 1px solid black;
    display: inline-block;
  }
    @keyframes carroon{
    0%{
      transform: translate(0,0);
    }
    25%{
      transform: translate(0,100px);
    }
    50%{
      transform: translate(100px,100px);
    }
    75%{
      transform: translate(100px,0);
    }
    100%{
      transform: translate(0,0);
    }
    }
    /* 注意:这里是animation而不是transition */
    .carroon-leave-active{
    animation: carroon 1s; 
    }
    .carroon-enter-active{
    animation: carroon 1s; 
    }
  </style>
  </head>
  <body>
  <div id="app">
    <button type="button" @click="btnClick">点击执行动画</button>
    <transition name="carroon">
    <h1 v-show="isShow">一个盒子</h1>
    </transition>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
    el: '#app',
    data() {
      return {
      isShow: true
      }
    },
    methods: {
      btnClick() {
      this.isShow = !this.isShow
      }
    }
    })
  </script>
  </body>
</html>

效果如下:

4e4ea9940647435f8ca813d70b1a04e3.gif

同时使用过渡和动画

Vue 为了知道过渡的完成,必须设置相应的事件监听器。它可以是 transitionend 或 animationend ,这取决于给元素应用的 CSS 规则。如果你使用其中任何一种,Vue 能自动识别类型并设置监听。

但是,在一些场景中,你需要给同一个元素同时设置两种过渡动效,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。在这种情况中,你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="databinding">
        <transition :duration="{ enter: 5000, leave: 10000 }" name="fade" type="transition" appear
            enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"
            appear-active-class="animated swing">
            <p v-if="show">动画</p>
        </transition>
        <button v-on:click="show = !show">点我</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#databinding',
            data: {
                show: true
            }
        })
    </script>
</body>
</html>

效果如下:

780f15d017644cc4bcb9ec72692f5a7f.gif

关于router的过渡动效

把<router-view>标签用<transition>标签包裹起来即可

加一个name的值,加了值后开头必须以test-......

<transition name="test">
      <router-view></router-view>
    </transition>

再在下面设置style样式即可

.test-enter,
.test-leave-to {
  opacity: 0;
}
.test-enter-to,
.test-leave {
  opacity: 1;
}
.test-enter-active,
.test-leave-active {
  transition: all 1s;
}

即可实现页面之间的过渡效果


相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的

热门文章

最新文章