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

传说中的龙 發表於 2023-2-21 18:42:00

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

<h2>一，官方文档地址:</h2>
<div class="cnblogs_code">
<pre>https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html</pre>
</div>
<h2>二，代码：</h2>
<div class="cnblogs_code">
<pre><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></pre>
</div>
说明：刘宏缔的架构森林是一个专注架构的博客，
网站：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
<h2>三，测试效果:</h2>
<img src="https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230221183807077-751960888.png">
<h2>四，查看hbuilderx的版本: </h2>
<div><img alt="" class="medium-zoom-image lazyload" height="233" width="445" data-src="https://img2023.cnblogs.com/blog/1938691/202302/1938691-20230212213610644-947637439.png"></div> 
来源：https://www.cnblogs.com/architectforest/p/17142028.html

頁: [1]

琼殿技术论坛's Archiver

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