uni-app:使用uni-transition动画(hbuilderx 3.6.18)

一，官方文档地址:

https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html

二，代码：

<template>
    <view>
        <view class="animation-element-wrapper">
            <uni-transition :duration="1500" ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
                :show="show"><text class="text">示例元素</text></uni-transition>
        </view>
        
        <scroll-view class="animation-buttons" scroll-y="true">
            <view style="display: flex;flex-direction: row;">
                <button class="animation-button" @tap="goFadeOut">淡出</button>
                <button class="animation-button" @tap="goFadeIn">淡入</button>
            </view>
            <view style="display: flex;flex-direction: row;">
               <button class="animation-button" @tap="fromTopToBottom">由上至下</button>
               <button class="animation-button" @tap="fromBottomToTop">由下至上</button>
            </view>
            <view style="display: flex;flex-direction: row;">
               <button class="animation-button" @tap="fromRightToLeft">由右至左</button>
               <button class="animation-button" @tap="fromLeftToRight">由左至右</button>
            </view>
            <view style="display: flex;flex-direction: row;">
               <button class="animation-button" @tap="magnify">放大</button>
               <button class="animation-button" @tap="reduce">缩小</button>
            </view>
            <view style="display: flex;flex-direction: row;">
               <button class="animation-button" @tap="rotateLeft">向左旋转</button>
               <button class="animation-button" @tap="rotateRight">向右旋转</button>
            </view>
        </scroll-view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                modeClass: 'fade',
                styles: {},
            }
        },
        onLoad() {
            // #ifdef APP-NVUE
            this.styles = {
                justifyContent: 'center',
                alignItems: 'center',
                width: '100px',
                height: '100px',
                borderRadius: '5px',
                textAlign: 'center',
                backgroundColor: '#4cd964',
                boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)',
            }
            // #endif
        },
        methods: {
            goFadeOut:function () {
               this.$refs.ani.step({
                   opacity: '0',
                   //rotate: '0'
               },{
                timingFunction: 'ease-in',
                duration: 1200
               });
               // 开始执行动画
               this.$refs.ani.run(()=>{
                    console.log('动画支持完毕')
               });
            },
            goFadeIn:function () {
               this.$refs.ani.step({
                   opacity: '1',
                   //rotate: '0'
               },{
                timingFunction: 'ease-in',
                duration: 1200
               });
               // 开始执行动画
               this.$refs.ani.run(()=>{
                   console.log('动画支持完毕')
               });
                
            },
            fromTopToBottom:function(){
               this.$refs.ani.step({
                   translateY: '100px',
                   //rotate: '0'
               },{
                timingFunction: 'ease-in',
                duration: 1200
               });
               // 开始执行动画
               this.$refs.ani.run(()=>{
                    console.log('动画支持完毕')
               });
            },
            fromBottomToTop:function(){
               this.$refs.ani.step({
                   translateY: '-100px',
               },{
                timingFunction: 'ease-in',
                duration: 1200
               });
               // 开始执行动画
               this.$refs.ani.run(()=>{
                    console.log('动画支持完毕')
               });
            },
            fromRightToLeft:function(){
               this.$refs.ani.step({
                   translateX: '-100px',
               },{
                timingFunction: 'ease-in',
                duration: 1200
               });
               // 开始执行动画
               this.$refs.ani.run(()=>{
                    console.log('动画支持完毕')
               });
            },
            
            fromLeftToRight:function(){
                           this.$refs.ani.step({
                               translateX: '100px',
                           },{
                               timingFunction: 'ease-in',
                               duration: 1200
                           });
                           // 开始执行动画
                           this.$refs.ani.run(()=>{
                               console.log('动画支持完毕')
                           });
            },
            
            magnify:function() {
                           this.$refs.ani.step({
                               scale: '1.5',
                           },{
                               timingFunction: 'ease-in',
                                duration: 1200
                           });
                           // 开始执行动画
                           this.$refs.ani.run(()=>{
                               console.log('动画支持完毕')
                           });
            },
            
            reduce:function() {
                           this.$refs.ani.step({
                               scale: '1',
                               //rotate: '0'
                           },{
                               timingFunction: 'ease-in',
                               duration: 1200
                           });
                           // 开始执行动画
                           this.$refs.ani.run(()=>{
                               console.log('动画支持完毕')
                           });
            },
            rotateLeft:function(){
                           this.$refs.ani.step({
                               rotate: '-90'
                           },
                           {
                               timingFunction: 'ease-in',
                               duration: 1200
                           });
                           // 开始执行动画
                           this.$refs.ani.run(()=>{
                               console.log('动画支持完毕')
                           });
            },
            rotateRight:function(){
                           this.$refs.ani.step({
                               rotate: '0'
                           },{
                               timingFunction: 'ease-in',
                               duration: 1200
                           });
                           // 开始执行动画
                           this.$refs.ani.run(()=>{
                               console.log('动画支持完毕')
                           });
            }
        }
    }
</script>

<style>
    .animation-element-wrapper {
        display: flex;
        width: 750rpx;
        height: 550rpx;
        padding-top: 150rpx;
        padding-bottom: 150rpx;
        flex-direction: row;
        justify-content: center;
        overflow: hidden;
        background-color: #ffffff;
    }

    .animation-element {
        width: 200rpx;
        height: 200rpx;
        background-color: #1AAD19;
    }
    
    .animation-buttons {
        padding:30rpx 0;
        width: 750rpx;
        /* height: 360rpx; */
    }
    
    .animation-button {
        float: left;
        width: 340rpx;
        margin: 15rpx 15rpx;
    }
    
    .transition{
                justify-content: center;
                align-items: center;
                width: 100px;
                height: 100px;
                border-radius: 5px;
                text-align: center;
                background-color: #4cd964;
                box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
    }
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-shi-yong-unitransition-dong-hua-hbuilderx-3-6-18/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

三，测试效果:

四，查看hbuilderx的版本: