2024-12-03 09:34:24 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="mobile-work">
|
|
|
|
|
|
<!-- #ifdef APP -->
|
|
|
|
|
|
<view class="app-top" :style="{ height: CustomBar+2+'rpx',
|
|
|
|
|
|
background: topLevel===0? 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
|
|
|
|
|
<view :style="{ height: CustomBar+'rpx',background: 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)'}"></view>
|
|
|
|
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`,marginTop: CustomBar+2+'rpx'}">
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- #ifndef APP -->
|
|
|
|
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<image :src="fileUrl+logo"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="mw-top" :style="{backgroundImage: `url(${fileUrl+topBackground})`}">
|
|
|
|
|
|
<view class="mwt-one">
|
|
|
|
|
|
<view class="mwto-item" :style="current===index ? {backgroundImage: `url(${fileUrl+selectBottom})`,
|
|
|
|
|
|
color: `rgba(33,33,33,1)`}:{}" v-for="(item,index) in selectList" :key="index" @click="changeSelect(index)">
|
|
|
|
|
|
{{ item }}
|
|
|
|
|
|
<image v-show="current===index" :src="fileUrl+blackStar" class="mwto-star"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="mwt-two">
|
|
|
|
|
|
<view class="mwtt-num">
|
|
|
|
|
|
<u-count-to autoplay color="#ff4269" fontSize="100" bold
|
2024-12-11 19:36:51 +08:00
|
|
|
|
:startVal="startVal" :endVal="current===0? workForm.total:collectForm.total"></u-count-to>
|
2024-12-03 09:34:24 +08:00
|
|
|
|
<image :src="fileUrl+redStar" class="mwtt-star"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="mwtt-unit">
|
2024-12-11 19:36:51 +08:00
|
|
|
|
件{{ current===0? '作':'藏' }}品
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="mw-content">
|
|
|
|
|
|
<view class="show-work">
|
2024-12-11 19:36:51 +08:00
|
|
|
|
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in current===0?workList:collectList" :key="index">
|
2024-12-03 09:34:24 +08:00
|
|
|
|
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.delete" @click.stop="deleteCollect(item,index)"></image>
|
2024-12-11 19:36:51 +08:00
|
|
|
|
<u-lazy-load border-radius="30" class="work-picture"
|
|
|
|
|
|
:image="ip+item.path"></u-lazy-load>
|
|
|
|
|
|
<!-- <image :lazy-load="true" class="work-picture" :src="ip+item.path" mode="widthFix"></image> -->
|
|
|
|
|
|
<view class="sign-text">{{ item.type || '暂无' }}</view>
|
|
|
|
|
|
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
|
|
|
|
|
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 下面这里等后端有了之后，用isFinish判断 -->
|
2024-12-11 19:36:51 +08:00
|
|
|
|
<view class="last-tip" @click="getMore">
|
|
|
|
|
|
{{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<u-toast ref="uToast"></u-toast>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import configService from '@/common/config.service.js';
|
|
|
|
|
|
import { tools } from '@/utils/utils.js';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
topLevel:{
|
|
|
|
|
|
type: Number,
|
|
|
|
|
|
default: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data(){
|
|
|
|
|
|
return{
|
|
|
|
|
|
// 基础路径
|
2024-12-11 19:36:51 +08:00
|
|
|
|
ip: configService.ip,
|
2024-12-03 09:34:24 +08:00
|
|
|
|
fileUrl: configService.fileUrl + 'pixel/',
|
|
|
|
|
|
// logo图标
|
|
|
|
|
|
logo: 'home/logo.png',
|
|
|
|
|
|
// 筛选项
|
2024-12-11 19:36:51 +08:00
|
|
|
|
selectList: ["我的创作", "我的藏品"],
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 顶部背景
|
|
|
|
|
|
topBackground: 'work/background.png',
|
|
|
|
|
|
// 选择黑星图片
|
|
|
|
|
|
blackStar: 'work/black-star.png',
|
|
|
|
|
|
// 选择白底图片
|
|
|
|
|
|
selectBottom: 'work/select-bottom.png',
|
|
|
|
|
|
// 选择白底图片
|
|
|
|
|
|
redStar: 'work/red-star.png',
|
|
|
|
|
|
// 选择白底图片
|
|
|
|
|
|
trash: 'work/trash.png',
|
|
|
|
|
|
// 当前选项
|
|
|
|
|
|
current: 0,
|
|
|
|
|
|
// 收藏作品列表
|
2024-12-11 19:36:51 +08:00
|
|
|
|
collectList:[],
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 我的创作
|
2024-12-11 19:36:51 +08:00
|
|
|
|
workList:[],
|
|
|
|
|
|
// 我的创作Form
|
|
|
|
|
|
workForm: {
|
|
|
|
|
|
current: 1,
|
|
|
|
|
|
size: 10,
|
|
|
|
|
|
isFinish: false,
|
|
|
|
|
|
total: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
// 我的收藏Form
|
|
|
|
|
|
collectForm: {
|
|
|
|
|
|
current: 1,
|
|
|
|
|
|
size: 10,
|
|
|
|
|
|
isFinish: false,
|
|
|
|
|
|
total: 0
|
|
|
|
|
|
},
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 标签图标
|
|
|
|
|
|
sign: 'home/typelam.png',
|
|
|
|
|
|
// 点击次数
|
|
|
|
|
|
touchNum: 0,
|
|
|
|
|
|
// 数字滚动开始数字
|
|
|
|
|
|
startVal: 0,
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2024-12-11 19:36:51 +08:00
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
this.workList = [];
|
|
|
|
|
|
this.collectList = [];
|
|
|
|
|
|
},
|
2024-12-03 09:34:24 +08:00
|
|
|
|
methods:{
|
2024-12-06 23:58:58 +08:00
|
|
|
|
// 初始化
|
|
|
|
|
|
init(){
|
2024-12-11 19:36:51 +08:00
|
|
|
|
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
|
|
|
|
|
|
this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
|
|
|
|
|
|
this.current === 0 ? this.getMyWorks() : this.getCollections();
|
|
|
|
|
|
},
|
|
|
|
|
|
// 查看更多
|
|
|
|
|
|
getMore(){
|
|
|
|
|
|
if(this.current === 0 ? this.workForm.isFinish : this.collectForm.isFinish) return;
|
|
|
|
|
|
if(this.current === 0){
|
|
|
|
|
|
this.workForm.current++;
|
|
|
|
|
|
this.getMyWorks();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.collectForm.current++;
|
|
|
|
|
|
this.getCollections();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 获取我的创作
|
|
|
|
|
|
async getMyWorks(){
|
|
|
|
|
|
if(this.workForm.isFinish) return;
|
|
|
|
|
|
let res = await this.$api.myCreations(this.workForm);
|
|
|
|
|
|
if(res.success){
|
|
|
|
|
|
const { records, total, current, size } = res.data;
|
|
|
|
|
|
const result = records.map((item)=>{
|
|
|
|
|
|
return {...item, path: encodeURI(item.path)}
|
|
|
|
|
|
});
|
|
|
|
|
|
if(current === 1){
|
|
|
|
|
|
this.workList = result
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.workList.push(...result);
|
|
|
|
|
|
}
|
|
|
|
|
|
this.workForm.total = total;
|
|
|
|
|
|
this.workForm.isFinish = current*size >= total;
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.$refs.uToast.show({type:'error',title: "我的创作获取失败!"});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 获取我的藏品
|
|
|
|
|
|
getCollections(){
|
2024-12-06 23:58:58 +08:00
|
|
|
|
|
2024-12-11 19:36:51 +08:00
|
|
|
|
},
|
|
|
|
|
|
imgLoaded() {
|
|
|
|
|
|
// 占位图加载完成
|
|
|
|
|
|
if (this.loadStatus == '') {
|
|
|
|
|
|
this.loadStatus = 'lazyed';
|
|
|
|
|
|
}
|
|
|
|
|
|
// 真正的图片加载完成
|
|
|
|
|
|
else if (this.loadStatus == 'lazyed') {
|
|
|
|
|
|
this.loadStatus = 'loaded';
|
|
|
|
|
|
this.$emit('load', this.index);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 错误的图片加载完成
|
|
|
|
|
|
errorImgLoaded() {
|
|
|
|
|
|
this.$emit('error', this.index);
|
2024-12-06 23:58:58 +08:00
|
|
|
|
},
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 切换选项
|
|
|
|
|
|
changeSelect(index){
|
|
|
|
|
|
this.current = index;
|
2024-12-11 19:36:51 +08:00
|
|
|
|
this.startVal = index===0?this.collectForm.total:this.workForm.total;
|
2024-12-03 09:34:24 +08:00
|
|
|
|
},
|
|
|
|
|
|
// 监听单双击，单击-预览图片、双击-显示删除图标
|
|
|
|
|
|
maskTouchend(item,index){
|
|
|
|
|
|
this.touchNum ++;
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
|
if(this.touchNum == 1){
|
2024-12-11 19:36:51 +08:00
|
|
|
|
const array = [this.ip+item.path];
|
|
|
|
|
|
if(item.compare) array.push(item.compare);
|
|
|
|
|
|
tools.methods.lookImage(0,array);
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
if(this.touchNum >= 2){
|
|
|
|
|
|
const result = item.delete?0:1;
|
|
|
|
|
|
if(result === 0){
|
|
|
|
|
|
// 添加淡出的class样式
|
|
|
|
|
|
item.display = 1;
|
|
|
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
// 下面的操作应该替换为请求后端数据后，再停止旋转
|
|
|
|
|
|
// 模拟刷新操作，这里用setTimeout模拟
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
// 移除淡出类
|
|
|
|
|
|
item.delete = result;
|
|
|
|
|
|
item.display = 0;
|
|
|
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
}, 800);
|
|
|
|
|
|
}else{
|
|
|
|
|
|
item.delete = result;
|
|
|
|
|
|
this.$forceUpdate();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
this.touchNum = 0;
|
|
|
|
|
|
},250)
|
|
|
|
|
|
},
|
|
|
|
|
|
// 取消收藏
|
|
|
|
|
|
deleteCollect(item,index){
|
|
|
|
|
|
let that = this;
|
2024-12-11 19:36:51 +08:00
|
|
|
|
let current = this.current===0;
|
2024-12-03 09:34:24 +08:00
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '提示',
|
2024-12-11 19:36:51 +08:00
|
|
|
|
content: `是否确认${current?'删除':'取消收藏'}该作品？`,
|
2024-12-03 09:34:24 +08:00
|
|
|
|
confirmColor: '#94d500',
|
2024-12-11 19:36:51 +08:00
|
|
|
|
success: async (res) => {
|
2024-12-03 09:34:24 +08:00
|
|
|
|
if (res.confirm) {
|
2024-12-11 19:36:51 +08:00
|
|
|
|
let res = await that.$api.deleteCreation(item.id);
|
|
|
|
|
|
if(res.success){
|
|
|
|
|
|
current ? that.workList.splice(index, 1) : this.collectList.splice(index, 1);
|
|
|
|
|
|
current ? that.workForm.total-- : that.collectForm.total--;
|
|
|
|
|
|
that.$refs.uToast.show({type:'success',title: `已${current?'删除':'取消收藏'}该作品！`});
|
|
|
|
|
|
}else{
|
|
|
|
|
|
that.$refs.uToast.show({type:'error',title: `作品${current?'删除':'取消收藏'}失败！`});
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.mobile-work{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
// #ifdef APP
|
|
|
|
|
|
.app-top{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
z-index: 81;
|
|
|
|
|
|
}
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
.mobile-logo{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
z-index: 81;
|
|
|
|
|
|
padding: 15rpx 0;
|
|
|
|
|
|
image{
|
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
|
height: 45rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.mw-top{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
.mwt-one{
|
|
|
|
|
|
margin-top: 65rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.mwto-item{
|
|
|
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: rgba(33,33,33,0.8);
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding: 5rpx 10rpx;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-position: bottom;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
transition: 0.5s;
|
|
|
|
|
|
.mwto-star{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -16rpx;
|
|
|
|
|
|
top: -7rpx;
|
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
|
height: 34rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.mwt-two{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-left: 65rpx;
|
|
|
|
|
|
margin-top: 32rpx;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
.mwtt-num{
|
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
|
margin-right: 18rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
.mwtt-star{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -30rpx;
|
|
|
|
|
|
top: -10rpx;
|
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
|
height: 34rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.mwtt-unit{
|
|
|
|
|
|
font-size: 31rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: rgba(33,33,33,0.8);
|
|
|
|
|
|
line-height: 80rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.mw-content{
|
|
|
|
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
|
|
|
|
|
z-index: 80;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-top: -35rpx;
|
|
|
|
|
|
border-top-right-radius: 36rpx;
|
|
|
|
|
|
border-top-left-radius: 36rpx;
|
|
|
|
|
|
background-color: #1a1929;
|
|
|
|
|
|
.show-work{
|
|
|
|
|
|
margin: 20rpx 45rpx 0;
|
|
|
|
|
|
column-count:2;
|
|
|
|
|
|
-moz-column-count:2; /* Firefox */
|
|
|
|
|
|
-webkit-column-count:2; /* Safari 和 Chrome */
|
|
|
|
|
|
column-gap: 1em;
|
|
|
|
|
|
-moz-column-gap: 1em;
|
|
|
|
|
|
-webkit-column-gap: 1em;
|
|
|
|
|
|
.work-item{
|
|
|
|
|
|
-webkit-column-break-inside: avoid;
|
|
|
|
|
|
break-inside: avoid; /*防止断点*/
|
|
|
|
|
|
// margin-bottom: 0.5em;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding-top: 30rpx;
|
|
|
|
|
|
.work-picture{
|
|
|
|
|
|
border: 0.1em solid #d5ff00;
|
|
|
|
|
|
border-radius: 30rpx;
|
2024-12-11 19:36:51 +08:00
|
|
|
|
// 骗系统开启硬件加速
|
|
|
|
|
|
transform: transition3d(0, 0, 0);
|
|
|
|
|
|
// 防止图片加载“闪一下”
|
|
|
|
|
|
will-change: transform;
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
.sign{
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 1.7em;
|
|
|
|
|
|
left: 0.6em;
|
2024-12-18 14:45:53 +08:00
|
|
|
|
width: 152rpx;
|
2024-12-03 09:34:24 +08:00
|
|
|
|
height: 47rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sign-text{
|
2024-12-11 19:36:51 +08:00
|
|
|
|
width: 132rpx;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
white-space: nowrap;
|
2024-12-03 09:34:24 +08:00
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 1.8em;
|
|
|
|
|
|
left: 0.9em;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.compare-sign{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
bottom: 0.2em;
|
|
|
|
|
|
width: 120rpx;
|
|
|
|
|
|
border: 0.1em solid #d5ff00;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.trash{
|
|
|
|
|
|
animation-duration: 0.8s;
|
|
|
|
|
|
animation-fill-mode: both;
|
|
|
|
|
|
backface-visibility: visible !important;
|
|
|
|
|
|
animation-name: showTrash;
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 110rpx;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -22rpx;
|
|
|
|
|
|
margin-top: -30rpx;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.hideTrash {
|
|
|
|
|
|
animation-duration: calc(1s * 0.75);
|
|
|
|
|
|
backface-visibility: visible !important;
|
|
|
|
|
|
animation-name: hideTrash;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.last-tip{
|
|
|
|
|
|
color: #d5ff00;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
margin-bottom: 160rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes showTrash {
|
|
|
|
|
|
from {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
|
|
|
|
animation-timing-function: ease-in;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
40% {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
|
|
|
|
|
animation-timing-function: ease-in;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
60% {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
80% {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
|
transform: perspective(400px);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes hideTrash {
|
|
|
|
|
|
from {
|
|
|
|
|
|
transform: perspective(400px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
30% {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
|
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
