uniapp實現簡單的動畫效果(不使用dom操作)


uniapp做開發區別於H5開發,不能使用js進行dom操作,只能獲取dom信息。
(獲取dom信息參考:https://www.cnblogs.com/huihuihero/p/12966528.html )

不能操作dom,這使得通過操作dom來實現一些簡單的動畫效果變得困難
不過有一個很簡單的思路:
定義不同的class,每個class對應一種樣式,加一個transition過渡。然后通過更換節點的class即可實現兩種樣式過渡(動畫)

示例(展示思路用)

<view :class="isLarge?'yesLarge':'notLarge'" @tap="toggleSize"></view>


toggleSize(){
    this.isLarge=!this.isLarge
}


.yesLarge{
    width: 200rpx;
    height: 200rpx;
    background-color: #a1a1a1;
    transition: all .5s;
}
.notLarge{
    width: 40rpx;
    height: 40rpx;
    background-color: #0169b1;
    transition: all .5s;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM