小編給大家分享一下如何使用小程序實現(xiàn)基本的切換動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了伊通免費建站歡迎大家使用！

一、什么是微信小程序？

小程序在我的理解中只是高度封裝的H5，封裝了各種組件。根據(jù)官方的說法小程序運行不是在瀏覽器當中。姑且算是微信的插件吧。

二、小程序不能操縱DOM

小程序不能直接操縱DOM，鼓勵的是數(shù)據(jù)綁定。例如vue.js這種。所以個人而言感覺跟如果習慣了用JQ去操縱DOM的開發(fā)者很不習慣。需要一個習慣的過程。

三、小程序不能引用JQ

小程序雖然可以引用外部JS。但是我一引用就出現(xiàn)異常。可能需要加以修改才能使用。我心想既然都做小程序了。不如按小程序的那一套走吧。所以就看小程序的API來走了。

四、使用小程序實現(xiàn)基本的切換動畫

　　　  html代碼

　　　  js代碼

從上面的代碼我們可以看到，我分別用了checkCodeBtnOpacity,checkCodeOpacity控制了兩個塊的透明度。用于隱藏。

用animationData保存動畫數(shù)據(jù)。

然后給bindGetCheckCode綁定了一個click事件。

然后調用了微信的API wx.createAnimation ，然后調用了opacity(1)來顯示，然后調用translateY(-100)Y軸平移來做一個上升的效果。

接著調用this.setData()來改動數(shù)據(jù)源。切換動畫完成。

以上是“如何使用小程序實現(xiàn)基本的切換動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！