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>
相关文章
|
7天前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
8月前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
202 1
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
8月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
105 2
|
8月前
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
569 1
|
8月前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
47 3
|
8月前
|
JavaScript
在Vue中,如何使用<transition>元素实现过渡效果?
在Vue中,如何使用<transition>元素实现过渡效果?
58 3
|
8月前
|
JavaScript 前端开发
描述 Vue 中的过渡效果和动画。
描述 Vue 中的过渡效果和动画。
25 0
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
82 0
CSS3动画属性之Animation
CSS3动画属性之Animation
117 0
|
机器学习/深度学习 自然语言处理 前端开发
CSS3动画属性之Transition
CSS3动画属性之Transition
123 0