github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
pipipi-pikachu 2020-12-22 22:53:24 +08:00
parent 8ff1500b53
commit 35eab9054b
11 changed files with 15 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
src/assets/animate/bounce.scss
View File

@ -1,139 +0,0 @@
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}

52
src/assets/animate/fade.scss
View File

@ -1,52 +0,0 @@
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}

43
src/assets/animate/flip.scss
View File

@ -1,43 +0,0 @@
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes flipInY {
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);
}
}

103
src/assets/animate/main.scss
View File

@ -1,103 +0,0 @@
@import './bounce.scss';
@import './fade.scss';
@import './flip.scss';
@import './rotate.scss';
@import './slide.scss';
@import './zoom.scss';
.animate {
animation-duration: 0ms;
&.duration-500 {
animation-duration: 500ms;
}
&.duration-1000 {
animation-duration: 1000ms;
}
&.duration-1500 {
animation-duration: 1500ms;
}
&.duration-2000 {
animation-duration: 2000ms;
}
&.bounceIn {
animation-name: bounceIn;
}
&.bounceInDown {
animation-name: bounceInDown;
}
&.bounceInLeft {
animation-name: bounceInLeft;
}
&.bounceInRight {
animation-name: bounceInRight;
}
&.bounceInUp {
animation-name: bounceInUp;
}
&.fadeIn {
animation-name: fadeIn;
}
&.fadeInDown {
animation-name: fadeInDown;
}
&.fadeInLeft {
animation-name: fadeInLeft;
}
&.fadeInRight {
animation-name: fadeInRight;
}
&.fadeInUp {
animation-name: fadeInUp;
}
&.flipInX {
animation-name: flipInX;
}
&.flipInY {
animation-name: flipInY;
}
&.rotateIn {
animation-name: rotateIn;
}
&.rotateInDownLeft {
animation-name: rotateInDownLeft;
}
&.rotateInDownRight {
animation-name: rotateInDownRight;
}
&.rotateInUpLeft {
animation-name: rotateInUpLeft;
}
&.rotateInUpRight {
animation-name: rotateInUpRight;
}
&.slideInDown {
animation-name: slideInDown;
}
&.slideInLeft {
animation-name: slideInLeft;
}
&.slideInRight {
animation-name: slideInRight;
}
&.slideInUp {
animation-name: slideInUp;
}
&.zoomIn {
animation-name: zoomIn;
}
&.zoomInDown {
animation-name: zoomInDown;
}
&.zoomInLeft {
animation-name: zoomInLeft;
}
&.zoomInRight {
animation-name: zoomInRight;
}
&.zoomInUp {
animation-name: zoomInUp;
}
}

64
src/assets/animate/rotate.scss
View File

@ -1,64 +0,0 @@
@keyframes rotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform-origin: center;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
transform-origin: left bottom;
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform-origin: left bottom;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
transform-origin: right bottom;
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform-origin: right bottom;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

39
src/assets/animate/slide.scss
View File

@ -1,39 +0,0 @@
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}

61
src/assets/animate/zoom.scss
View File

@ -1,61 +0,0 @@
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}

12
src/views/Editor/Canvas/hooks/useDropImageElement.ts → src/views/Editor/Canvas/hooks/useDropImageOrText.ts
View File

@ -7,13 +7,19 @@ export default (elementRef: Ref<HTMLElement | null>) => {
const handleDrop = (e: DragEvent) => { const handleDrop = (e: DragEvent) => {
if(!e.dataTransfer) return if(!e.dataTransfer) return
const file = e.dataTransfer.items[0] const dataTransferItem = e.dataTransfer.items[0]
if( file.kind === 'file' && file.type.indexOf('image') !== -1 ) {
const imageFile = file.getAsFile() if(dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
const imageFile = dataTransferItem.getAsFile()
if(imageFile) { if(imageFile) {
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL)) getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
} }
} }
else if(dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
dataTransferItem.getAsString(text => {
console.log(text)
})
}
} }
onMounted(() => { onMounted(() => {

4
src/views/Editor/Canvas/index.vue
View File

@ -68,7 +68,7 @@ import { AlignmentLineProps } from '@/types/edit'
import useViewportSize from './hooks/useViewportSize' import useViewportSize from './hooks/useViewportSize'
import useMouseSelection from './hooks/useMouseSelection' import useMouseSelection from './hooks/useMouseSelection'
import useDropImageElement from './hooks/useDropImageElement' import useDropImageOrText from './hooks/useDropImageOrText'
import useRotateElement from './hooks/useRotateElement' import useRotateElement from './hooks/useRotateElement'
import useScaleElement from './hooks/useScaleElement' import useScaleElement from './hooks/useScaleElement'
import useSelectElement from './hooks/useSelectElement' import useSelectElement from './hooks/useSelectElement'
@ -117,7 +117,7 @@ export default defineComponent({
} }
watchEffect(setLocalElementList) watchEffect(setLocalElementList)
useDropImageElement(viewportRef) useDropImageOrText(viewportRef)
const canvasRef = ref<HTMLElement | null>(null) const canvasRef = ref<HTMLElement | null>(null)
const canvasScale = computed(() => store.state.canvasScale) const canvasScale = computed(() => store.state.canvasScale)

2
src/views/Editor/usePasteEvent.ts
View File

@ -37,7 +37,7 @@ export default () => {
} }
} }
if( clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain' ) { if(clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text)) clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text))
} }
} }

6
src/views/Player/index.vue → src/views/SlideShow/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="player"> <div class="slide-show">
player slide-show
</div> </div>
</template> </template>
@ -8,6 +8,6 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'player', name: 'slide-show',
}) })
</script> </script>