uView Transition 动画

简介: uView Transition 动画

该组件用于组件的动画过渡效果。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过slot传入内容,默认使用的是fade效果

<template>
    <u-transition :show="show">
        <view class="transition"></view>
    </u-transition>
</template>
<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>

copy

#动画模式

通过mode传入效果模式,目前支持:

  • fade 淡入
  • fade-up 上滑淡入
  • fade-down 下滑淡入
  • fade-left 左滑淡入
  • fade-right 右滑淡入
  • slide-up 上滑进入
  • slide-down 下滑进入
  • slide-left 左滑进入
  • slide-right 右滑进入
  • zoom-in 缩放
  • zoom-out 缩放
<template>
    <u-transition :show="show" mode="zoom-in">
        <view class="transition"></view>
    </u-transition>
</template>
<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>
相关文章
|
5月前
|
前端开发 JavaScript API
Nuxt3 实战 (十一):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法,以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式,可以实现页面过渡效果。同时,文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后,文章以一个Github仓库链接和一个线上预览地址作为总结,表示遵循官方文档操作即可完成相关设置。
145 0
Nuxt3 实战 (十一):添加路由 Transition 过渡效果和 Loading 动画
|
4月前
|
JavaScript
vue 动画 —— 滚动动画
vue 动画 —— 滚动动画
53 0
|
6月前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
166 1
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
6月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
69 2
|
6月前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
36 3
|
6月前
|
JavaScript 前端开发
描述 Vue 中的过渡效果和动画。
描述 Vue 中的过渡效果和动画。
22 0
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
75 0
|
前端开发 JavaScript
【Vue3 第二十三章】Transition 过渡动画
【Vue3 第二十三章】Transition 过渡动画
299 1
|
JavaScript 前端开发
你到底懂不懂 Transition 组件?
你到底懂不懂 Transition 组件?
120 0
|
前端开发
写个简单css动画,transition 和animate
写个简单css动画,transition 和animate
115 0