• 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{
         200rpx;
        height: 200rpx;
        background-color: #a1a1a1;
        transition: all .5s;
    }
    .notLarge{
         40rpx;
        height: 40rpx;
        background-color: #0169b1;
        transition: all .5s;
    }
    
  • 相关阅读:
    2019春第一次实验报告
    2019春第二次实验报告
    第十二周编程总结
    第十一周编程总结
    第十周作业
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
  • 原文地址:https://www.cnblogs.com/huihuihero/p/14871075.html
Copyright © 2020-2023  润新知