|
|
@@ -5,19 +5,372 @@
|
|
|
>
|
|
|
<div
|
|
|
v-show="showTree"
|
|
|
+ ref="img-wrapper"
|
|
|
class="img-wrapper"
|
|
|
+ @scroll="onImgWrapperScroll"
|
|
|
>
|
|
|
- <img
|
|
|
- id="tree-image"
|
|
|
- src="@/assets/image/tall-tree.png"
|
|
|
- alt=""
|
|
|
- @load="onTreeImgLoad"
|
|
|
- >
|
|
|
+ <div class="img-wrapper-tall">
|
|
|
+ <img
|
|
|
+ ref="tree-image"
|
|
|
+ class="tree-image"
|
|
|
+ src="@/assets/image/tall-tree-no-fruit.png"
|
|
|
+ alt=""
|
|
|
+ @load="onTreeImgLoad"
|
|
|
+ >
|
|
|
+ <!-- 各标签（果子）的代码顺序与显示顺序上下相反 -->
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/金色中国.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(10.16rem + 0.78rem);
|
|
|
+ left: 10.11rem;
|
|
|
+ top: calc(371.97rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 's')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/在此.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.89rem + 0.78rem);
|
|
|
+ left: 10.06rem;
|
|
|
+ top: calc(344.22rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'a')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/藏品架起沟通的桥梁.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.28rem + 0.78rem);
|
|
|
+ left: 9.52rem;
|
|
|
+ top: calc(323.53rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'f')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/温婉.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(10.28rem + 0.78rem);
|
|
|
+ left: 11.17rem;
|
|
|
+ top: calc(301.86rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'p')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/和合.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.92rem + 0.78rem);
|
|
|
+ left: 12.88rem;
|
|
|
+ top: calc(283.22rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'u')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/南腔北调.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.31rem + 0.78rem);
|
|
|
+ left: 7.14rem;
|
|
|
+ top: calc(282.41rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'oa')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/呼吸.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.89rem + 0.78rem);
|
|
|
+ left: 9.59rem;
|
|
|
+ top: calc(263.81rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'c')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/法老王.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(10.47rem + 0.78rem);
|
|
|
+ left: 7.34rem;
|
|
|
+ top: calc(244.69rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 't')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/缀白裘.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 7.34rem;
|
|
|
+ top: calc(227.08rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'b')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/帝国盛世.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 11.58rem;
|
|
|
+ top: calc(219.19rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'z')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/青藤.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(8.59rem + 0.78rem);
|
|
|
+ left: 7.69rem;
|
|
|
+ top: calc(206.64rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'x')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/走进.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.11rem + 0.78rem);
|
|
|
+ left: 12.7rem;
|
|
|
+ top: calc(202.94rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'o')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/回家过年.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.2rem + 0.78rem);
|
|
|
+ left: 6.58rem;
|
|
|
+ top: calc(188.28rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'za')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/穆夏.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.22rem + 0.78rem);
|
|
|
+ left: 10.02rem;
|
|
|
+ top: calc(180.03rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'd')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/称霸侏罗纪.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(9.38rem + 0.78rem);
|
|
|
+ left: 6.69rem;
|
|
|
+ top: calc(171.81rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'j')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/世界巨匠.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.67rem + 0.78rem);
|
|
|
+ left: 10.48rem;
|
|
|
+ top: calc(163.45rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'h')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/暑期.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(7.19rem + 0.78rem);
|
|
|
+ left: 6.94rem;
|
|
|
+ top: calc(149.83rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'l')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/金色阿富汗.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(11.34rem + 0.78rem);
|
|
|
+ left: 10.8rem;
|
|
|
+ top: calc(138.52rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'k')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/从毕加索.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.98rem + 0.78rem);
|
|
|
+ left: 5.84rem;
|
|
|
+ top: calc(132.33rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'g')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/兄弟王.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.92rem + 0.78rem);
|
|
|
+ left: 10.67rem;
|
|
|
+ top: calc(120.39rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'v')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/仰之弥高.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.44rem + 0.78rem);
|
|
|
+ left: 6.39rem;
|
|
|
+ top: calc(120.5rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'y')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/融合.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.75rem;
|
|
|
+ height: calc(9.13rem + 0.78rem);
|
|
|
+ left: 11.89rem;
|
|
|
+ top: calc(108.2rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'e')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/晶华.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(7.81rem + 0.78rem);
|
|
|
+ left: 8.72rem;
|
|
|
+ top: calc(98.95rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'm')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/百花呈瑞.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.56rem + 0.78rem);
|
|
|
+ left: 10.72rem;
|
|
|
+ top: calc(86.63rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'w')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/考古江苏.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(7.81rem + 0.78rem);
|
|
|
+ left: 10.23rem;
|
|
|
+ top: calc(68.44rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'r')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/浮世绘.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 2.5rem;
|
|
|
+ height: calc(5rem + 0.78rem);
|
|
|
+ left: 8.53rem;
|
|
|
+ top: calc(59.44rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'n')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/宋韵.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(8.28rem + 0.78rem);
|
|
|
+ left: 9.11rem;
|
|
|
+ top: calc(45.75rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('traditionModern', 'q')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/万水千山.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(12.23rem + 0.78rem);
|
|
|
+ left: 12.3rem;
|
|
|
+ top: calc(26.1rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('theme', 'i')"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/image/fruits/家国.png"
|
|
|
+ class="fruit"
|
|
|
+ alt=""
|
|
|
+ style="
|
|
|
+ width: 3.13rem;
|
|
|
+ height: calc(10.31rem + 0.78rem);
|
|
|
+ left: 3.48rem;
|
|
|
+ top: calc(4.83rem - 0.78rem)
|
|
|
+ "
|
|
|
+ @click="onClickFruit('wuyiba', 'aa')"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<SlideTip
|
|
|
- v-show="showSlideTip"
|
|
|
+ v-show="showSlideTip && showTree"
|
|
|
class="slide-tip"
|
|
|
- text="了<br>解<br>详<br>情"
|
|
|
/>
|
|
|
<van-loading
|
|
|
v-show="!showTree"
|
|
|
@@ -40,99 +393,80 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TWEEN from '@tweenjs/tween.js'
|
|
|
+import VisSenseFactory from 'vissense'
|
|
|
+const VisSense = VisSenseFactory(window)
|
|
|
|
|
|
export default {
|
|
|
+ name: 'TreeAnimation',
|
|
|
data() {
|
|
|
return {
|
|
|
showTree: false,
|
|
|
showSlideTip: false,
|
|
|
- animationBottom: {
|
|
|
- value: 0
|
|
|
- },
|
|
|
- requestAnimationId: null,
|
|
|
- treeImageNode: null,
|
|
|
- timeoutId: null,
|
|
|
+ visMonitorList: [],
|
|
|
+ scrollTop: 0,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
+ created() {
|
|
|
+ },
|
|
|
mounted() {
|
|
|
+ const fruitNodeList = document.getElementsByClassName('fruit')
|
|
|
+ for (const iterator of fruitNodeList) {
|
|
|
+ let visMonitor = VisSense(iterator).monitor({
|
|
|
+ percentagechange: function (VisMon) {
|
|
|
+ if (VisMon._state.percentage > 0.5) {
|
|
|
+ iterator.style.opacity = "1"
|
|
|
+ visMonitor.stop()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.visMonitorList.push(visMonitor)
|
|
|
+ visMonitor.start()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.$refs['img-wrapper'].scrollTop = this.scrollTop
|
|
|
+ },
|
|
|
+ deactivated() {
|
|
|
+ this.scrollTop = this.$refs['img-wrapper'].scrollTop
|
|
|
},
|
|
|
destroyed() {
|
|
|
- cancelAnimationFrame(this.requestAnimationId)
|
|
|
- clearTimeout(this.timeoutId)
|
|
|
+ for (const iterator of this.visMonitorList) {
|
|
|
+ iterator.stop()
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- animate() {
|
|
|
- TWEEN.update()
|
|
|
- // 这个动画如果用css实现，在ios里会有图片显示不全的问题。
|
|
|
- this.treeImageNode.style.bottom = this.animationBottom.value + 'px'
|
|
|
- this.requestAnimationId = requestAnimationFrame(this.animate)
|
|
|
- },
|
|
|
onTreeImgLoad() {
|
|
|
this.showTree = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs['img-wrapper'].scrollTop = this.$refs['tree-image'].scrollHeight
|
|
|
+ })
|
|
|
|
|
|
- this.timeoutId = setTimeout(() => {
|
|
|
- this.treeImageNode = document.getElementById('tree-image')
|
|
|
-
|
|
|
- const tween1 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween1.to({
|
|
|
- value: -this.treeImageNode.clientHeight * 0.305
|
|
|
- }, 39344 * 2 * 0.305)
|
|
|
- tween1.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- const tween2 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween2.to({
|
|
|
- value: -this.treeImageNode.clientHeight * 0.50
|
|
|
- }, 39344 * 2 * (0.50 - 0.305))
|
|
|
- tween2.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- const tween3 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween3.to({
|
|
|
- value: -this.treeImageNode.clientHeight * 0.59
|
|
|
- }, 39344 * 2 * (0.59 - 0.50))
|
|
|
- tween3.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- const tween4 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween4.to({
|
|
|
- value: -this.treeImageNode.clientHeight * 0.7
|
|
|
- }, 39344 * 2 * (0.7 - 0.59))
|
|
|
- tween4.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- const tween5 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween5.to({
|
|
|
- value: -this.treeImageNode.clientHeight * 0.8
|
|
|
- }, 39344 * 2 * (0.8 - 0.7))
|
|
|
- tween5.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- const tween6 = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween6.to({
|
|
|
- value: window.innerHeight - this.treeImageNode.clientHeight
|
|
|
- }, 39344 * 2 * (1 - 0.8) - 39344 * 2 * window.innerHeight / this.treeImageNode.clientHeight)
|
|
|
- tween6.onComplete(() => {
|
|
|
- this.showSlideTip = true
|
|
|
-
|
|
|
- let mc = new Hammer(this.$refs['hammer-target'])
|
|
|
- mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
|
|
|
- const that = this
|
|
|
- mc.on("panup", function me() {
|
|
|
- mc.off('panup', me)
|
|
|
- that.$router.push({ name: 'TreeSelection' })
|
|
|
- })
|
|
|
- })
|
|
|
- tween6.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
-
|
|
|
- tween1.chain(tween2)
|
|
|
- tween2.chain(tween3)
|
|
|
- tween3.chain(tween4)
|
|
|
- tween4.chain(tween5)
|
|
|
- tween5.chain(tween6)
|
|
|
-
|
|
|
- tween1.start()
|
|
|
- this.requestAnimationId = this.animate()
|
|
|
- }, 1000)
|
|
|
+ let mc = new Hammer(this.$refs['hammer-target'])
|
|
|
+ mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
|
|
|
+ const that = this
|
|
|
+ mc.on("pandown", function me() {
|
|
|
+ if (that.$refs['img-wrapper'].scrollTop === 0) {
|
|
|
+ that.$router.push({ name: 'TreeSelection' })
|
|
|
+ mc.off('pandown', me)
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onImgWrapperScroll(e) {
|
|
|
+ if (this.$refs['tree-image'].scrollHeight - window.innerHeight - e.target.scrollTop <= 50) {
|
|
|
+ this.showSlideTip = true
|
|
|
+ } else if ( e.target.scrollTop === 0) {
|
|
|
+ this.showSlideTip = true
|
|
|
+ } else {
|
|
|
+ this.showSlideTip = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickFruit(exhibitionType, exhibitionId) {
|
|
|
+ this.$router.push(`/ExhibitionDetailAnimation?exhibitionType=${exhibitionType}&exhibitionId=${exhibitionId}`)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -144,23 +478,26 @@ export default {
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
> .img-wrapper {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 18.28rem;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- overflow: hidden;
|
|
|
- > img {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- opacity: 0;
|
|
|
- bottom: 0;
|
|
|
- animation-name: emerge;
|
|
|
- animation-duration: 1s;
|
|
|
- animation-timing-function: linear;
|
|
|
- animation-delay: 0s;
|
|
|
- animation-fill-mode: forwards;
|
|
|
+ height: 100%;
|
|
|
+ widows: 100%;
|
|
|
+ animation: emerge 1s 0.7s linear forwards;
|
|
|
+ overflow: auto;
|
|
|
+ opacity: 0;
|
|
|
+ > .img-wrapper-tall {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 18.28rem;
|
|
|
+ position: relative;
|
|
|
+ > .tree-image {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > .fruit {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30rem;
|
|
|
+ left: 3rem;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 1s;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
> .loading {
|
|
|
@@ -189,34 +526,4 @@ export default {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
-@keyframes start-slide {
|
|
|
- 0% {
|
|
|
- top: 100%;
|
|
|
- transform: translateY(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: 100%;
|
|
|
- transform: translateY(-95%);
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes linear-slide {
|
|
|
- 0% {
|
|
|
- top: 100%;
|
|
|
- transform: translateY(-95%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: 0%;
|
|
|
- transform: translateY(-5%);
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes end-slide {
|
|
|
- 0% {
|
|
|
- top: 0%;
|
|
|
- transform: translateY(-5%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- top: 0;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
任一存
