鸿蒙应用开发-container动漫效果体验 原创

发布于 2021-4-9 16:09
浏览
0收藏

container案例练习。

 

点击按钮触发事件,两个方块颜色发生渐变。

鸿蒙应用开发-container动漫效果体验-开源基础软件社区

 

  鸿蒙应用开发-container动漫效果体验-开源基础软件社区

 

  鸿蒙应用开发-container动漫效果体验-开源基础软件社区

Hml代码如下:

<!-- xxx.hml -->
<div class="item-container">
    <text class="header">动漫效果图</text>
    <div class="item {{colorParam}}">
        <text class="txt">color</text>
    </div>
    <div style="height: 50px;"></div>
    <div class="item {{opacityParam}}">
        <text class="txt">opacity</text>
    </div>
    <input class="button" type="button" name="" value="show" onclick="showAnimation"/>
</div>

 

Css代码如下:

/* xxx.css */
.item-container {
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
}
.header {
    margin-bottom: 20px;
    font-size: 46px;
}
.item {
    background-color: #f76160;
}
.txt {
    text-align: center;
    width: 300px;
    height: 300px;
    padding-top: 50px;
}
.button {
    width: 200px;
    font-size: 30px;
    background-color: #09ba07;
    margin-top: 50px;
}
.color {
    animation-name: Color;
    animation-duration: 8000ms;
}
.opacity {
    animation-name: Opacity;
    animation-duration: 8000ms;
}
@keyframes Color {
    from {
        background-color: #62FF1F;
    }
    to {
        background-color: #46E4B7;
    }
}
@keyframes Opacity {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 0.1;
    }
}

 

Js代码如下:

 

// xxx.js
export default {
    data: {
        colorParam: '',
        opacityParam: '',
    },
    showAnimation: function () {
        this.colorParam = '';
        this.opacityParam = '';
        this.colorParam = 'color';
        this.opacityParam = 'opacity';
    },
}

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/Js_animation_demo

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐