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>
相关文章
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
77 0
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
9月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
118 2
|
9月前
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
673 1
|
9月前
|
前端开发 UED
深入理解CSS过渡效果(Transition):提升网页动画体验
深入理解CSS过渡效果(Transition):提升网页动画体验
387 1
|
9月前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
54 3
|
9月前
|
JavaScript 前端开发
描述 Vue 中的过渡效果和动画。
描述 Vue 中的过渡效果和动画。
28 0
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
85 0
|
JavaScript 前端开发
js 简单的动画过渡效果
js 简单的动画过渡效果
82 0
|
机器学习/深度学习 自然语言处理 前端开发
CSS3动画属性之Transition
CSS3动画属性之Transition
131 0

热门文章

最新文章