前端学习(1734):前端系列javascript之添加动画

<template><view class="content"><!-- 状态栏 --><view v-if="list.length !== 0" class="todo-header"><!-- 状态栏的左侧 --><view class="todo-header__left"><text class="active-text">{{text}}</text><text>{{listData.length}}条</text></view><!-- 状态栏的右侧 --><view class="todo-header__right"><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 0}" @click="tab(0)">全部</view><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 1}" @click="tab(1)">待办</view><view class="todo-header__right-item" :class="{'active-tab':activeIndex === 2}" @click="tab(2)">已完成</view></view></view><!-- 没有数据的状态 --><view v-if="list.length === 0" class="default"><view class="image-default"><image src="../../static/default.png" mode="aspectFit"></image></view><view class="default-info"><view class="default-info__text">您还没有创建任何待办事项</view><view class="default-info__text">点击下方+号创建一个吧</view></view></view><!-- 内容 --><view v-else class="todo-content"><!-- todo--finish --><view class="todo-list" :class="{'todo--finish':item.checked}" v-for="(item,index) in listData" :key="index" @click="finish(item.id)"><view class="todo-list__checkbox"><view class="checkbox"></view></view><view class="todo-list__content">{{item.content}}</view></view></view><!-- 创建按钮 --><view class="create-todo" @click="create"><text class="iconfont icon-jia" :class="{'create-todo-active':textShow}"></text></view><!-- 输入框 --><view v-if="active" class="create-content" :class="{'create--show':textShow}"><view class="create-content-box"><!-- input 输入 --><view class="create-input"><input type="text" v-model="value" placeholder="请输入您要创建的todo" /></view><!-- 发布按钮 --><view class="create-button" @click="add">创建</view></view></view></view>
</template><script>export default {data() {return {value: '',list: [],active: false,activeIndex: 0,text: '全部',textShow: false}},onLoad() {},computed: {listData() {let list = JSON.parse(JSON.stringify(this.list))let newList = []// 点击 全部if (this.activeIndex === 0) {this.text = '全部'return list}// 点击 待办事项if (this.activeIndex === 1) {// checked = falselist.forEach((item) => {if (!item.checked) {newList.push(item)}})this.text = '待办'return newList}// 点击 已完成if (this.activeIndex === 2) {// checked = turelist.forEach((item) => {if (item.checked) {newList.push(item)}})this.text = '已完成'return newList}return []},},methods: {// 打开输入框create() {if (this.active) {this.close()} else {this.open()}},// 打开 动画open() {this.active = truethis.$nextTick(() => {setTimeout(() => {this.textShow = true}, 50)})},// 关闭动画close() {this.textShow = falsethis.$nextTick(()=>{setTimeout(() => {this.active = false}, 350)})},// 发布add() {console.log(this.value);if (this.value === '') {uni.showToast({title: "请输入内容",icon: 'none'})return}this.list.unshift({id: 'id' + new Date().getTime(),content: this.value,checked: false})this.value = ''this.close()},// 点击列表触发finish(id) {let index = this.list.findIndex((item) => item.id === id)console.log('我被点击了', this.list[index]);this.list[index].checked = !this.list[index].checked},tab(index) {this.activeIndex = index}}}
</script><style>@import '../../common/icon.css';.todo-header {position: fixed;top: 0;left: 0;display: flex;align-items: center;padding: 0 15px;font-size: 12px;color: #333333;width: 100%;height: 45px;box-sizing: border-box;box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);background: #FFFFFF;z-index: 10;}.todo-header__left {width: 100%;}.active-text {font-size: 14px;color: #279abf;padding-right: 10px;}.todo-header__right {flex-shrink: 0;display: flex;}.todo-header__right-item {padding: 0 5px;}.active-tab {color: #279abf;}.todo-content {position: relative;padding-top: 50px;padding-bottom: 100px;}.todo-list {position: relative;display: flex;align-items: center;padding: 15px;margin: 15px;color: #0c3854;font-size: 14px;border-radius: 10px;background: #cfebfd;box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.1), -1px 2px 1px 0 rgba(255, 255, 255) inset;overflow: hidden;}.todo-list:after {position: absolute;content: '';top: 0;bottom: 0;left: 0;width: 5px;background: #91d1e8;}.todo-list__checkbox {padding-right: 15px;}.checkbox {width: 20px;height: 20px;border-radius: 50%;background: #FFFFFF;box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);}.todo--finish .checkbox {position: relative;background: #eee;}.todo--finish .checkbox:after {content: '';position: absolute;width: 10px;height: 10px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius: 50%;background: #CFEBFD;box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;}.todo--finish .todo-list__content {color: #999999;}.todo--finish.todo-list:before {content: '';position: absolute;top: 0;bottom: 0;left: 40px;right: 10px;height: 2px;margin: auto 0;background: #bdcdd8;}.todo--finish.todo-list:after {background: #cccccc;}.create-todo {display: flex;justify-content: center;align-items: center;position: fixed;bottom: 20px;left: 0;right: 0;margin: 0 auto;width: 50px;height: 50px;border-radius: 50%;background-color: #deeff5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;}.icon-jia {font-size: 30px;color: #add8e6;}.create-content {position: fixed;bottom: 95px;left: 20px;right: 20px;transition: all 0.3s;opacity: 0;transform: scale(0) translateY(200%)}.create--show {opacity: 1;transform: scale(1) translateY(0);}.create-content-box {display: flex;align-items: center;padding: 0 15px;padding-right: 0;border-radius: 50px;background: #DEEFF5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;z-index: 2;}.create-input {width: 100%;padding-right: 15px;color: #add8e6;}.create-button {display: flex;justify-content: center;align-items: center;flex-shrink: 0;width: 80px;height: 50px;border-radius: 50px;font-size: 16px;color: #88d4ec;box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);}.create-content:after {content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);z-index: -1;}.create-content-box:after {content: '';position: absolute;right: 0;left: 0;bottom: -8px;margin: 0 auto;width: 20px;height: 20px;background: #DEEFF5;transform: rotate(45deg);}.default {padding-top: 100px;}.image-default {display: flex;justify-content: center;}.image-default image {width: 100%;}.default-info {text-align: center;font-size: 14px;color: #CCCCCC;}.icon-jia {transition: transform 0.3s;}.create-todo-active {transform: rotate(135deg);}
</style>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419082.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android146 360 病毒查杀

<?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:orientatio…

24 | 二叉树基础(下):有了如此高效的散列表,为什么还需要二叉树?

这节学习一种特殊的二叉树—二叉查找树。它最大的特点是支持动态数据集合的快速插入、删除、查找操作。但是散列表也是支持这些操作的&#xff0c;并且散列表的这些操作比二叉查找树更高效&#xff0c;时间复杂度是 O(1)。 问题引入 既然有高效的散列表&#xff0c;二叉树的地…

25 | 红黑树(上):为什么工程中都用红黑树这种二叉树?

问题引入 二叉查找树在频繁的动态更新过程中&#xff0c;可能会出现树的高度远大于 log2n 的情况&#xff0c;从而导致各个操作的效率下降。极端情况下&#xff0c;二叉树会退化为链表&#xff0c;时间复杂度会退化到 O(n)。要解决这个复杂度退化的问题&#xff0c;需要设计一…

Rabbitmq如何设置优先级队列?如何限流?如何重试?如何处理幂等性?

优先级队列 方式一&#xff1a;可以通过RabbitMQ管理界面配置队列的优先级属性&#xff0c;如下图的x-max-priority 方式二&#xff1a;代码设置 Map<String,Object> args new HashMap<String,Object>(); args.put("x-max-priority", 10); channel.que…

【Qt】Qt之进程间通信(Windows消息)【转】

简述 通过上一节的了解&#xff0c;我们可以看出进程通信的方式很多&#xff0c;今天分享下如何利用Windows消息机制来进行不同进程间的通信。 简述效果发送消息 自定义类型与接收窗体发送数据接收消息 设置标题重写nativeEvent效果 发送消息 自定义类型与接收窗体 包含所需库&…

启动nginx服务报错Job for nginx.service failed because the control process exited with error code.

nginx使用service nginx restart报错 启动nginx服务时如果遇到这个错误 Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details. 可能原因: 1、配…

27 | 递归树:如何借助树来求解递归算法的时间复杂度?

目的 借助递归树来分析递归算法的时间复杂度 递归树 递归的思想就是将大问题分解为小问题来求解&#xff0c;然后再将小问题分解为小小问题。这样一层一层地分解&#xff0c;直到问题的数据规模被分解得足够小&#xff0c;不用继续递归分解为止。 如果我们把这个一层一层的…

28 | 堆和堆排序:为什么说堆排序没有快速排序快?

如何理解“堆” 堆排序是一种原地的、时间复杂度为 O(nlogn) 的排序算法 堆的两个特点&#xff1a; 一颗完全二叉树堆中每个节点都必须大于等于&#xff08;或者小于等于&#xff09;其左右子节点的值&#xff1b; 对于每个节点的值都大于等于子树中每个节点值的堆&#xff…

29 | 堆的应用:如何快速获取到Top 10最热门的搜索关键词?

为什么评价算法性能是根据时间和空间复杂度&#xff0c;而不是别的参数&#xff1f;是因为计算机结构是冯诺依曼体系&#xff0c;除了输入输出设备和控制器&#xff0c;就剩下运算器和存储器了 问题引入 搜索引擎的热门搜索排行榜功能是如何实现的&#xff1f;搜索引擎每天会…

多线程——线程间的同步通信

1、概要 线程间的相互作用&#xff1a;线程之间需要一些协调通信&#xff0c;来共同完成一件任务。线程间的协调通信主要通过wait方法和notify方法来完成。因为wait和notify方法定义在Object类中&#xff0c;因此会被所有的类所继承。这些方法都是final的&#xff0c;即它们都是…