鸿蒙应用开发-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