我正在尝试创建一个带有 2 个按钮(向上和向下箭头)的 slider ,当用户单击向上箭头时, slider 中的当前元素(居中)向上滑动并淡出(即隐藏或不透明度变为0),下一个元素从屏幕底部向上滑动,直到不透明度变为1。
但我似乎无法仅使用 CSS 使其工作。我设法使用 javascript (Vuejs) 复制了它,但效率很低。
<template>
<transition appear>
<div v-if="condition" class="trans-container">
<slot></slot>
</div>
</transition>
</template>
<script>
import velocity from 'velocity-animate'
export default {
name: "Slide",
props: {
condition: {
default: true,
type: Boolean
},
direction: {
type: String
}
},
methods: {
// --------
// ENTERING
// --------
beforeEnter: function (el) {
// el.style.opacity = 0
Velocity(el, {
translateY: this.direction === 'up' ? '100%' : '-100%',
opacity: 0
}, {
duration: 300
});
},
// the done callback is optional when
// used in combination with CSS
enter: function (el, done) {
Velocity(el, {
translateY: '0%',
opacity: 1
}, {
duration: 300
});
// ...
// done()
},
afterEnter: function (el) {
},
enterCancelled: function (el) {
// ...
},
// --------
// LEAVING
// --------
beforeLeave: function (el) {
Velocity(el, {
translateY: this.direction === 'down' ? '100%' : '-100%',
opacity: 0
}, {
duration: 300
});
// ...
},
// the done callback is optional when
// used in combination with CSS
leave: function (el, done) {
Velocity(el, {
translateY: this.direction === 'down' ? '100%' : '-100%',
opacity: 0
}, {
duration: 300
});
// ...
// done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled only available with v-show
leaveCancelled: function (el) {
// ...
}
}
}
</script>
<style scoped>
.trans-container {
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
align-items: center;
}
</style>
我只是无法使用 css 来完成。可能吗?
最佳答案
基本思路:
用户点击按钮后,附加类:
.disappear {
transform: translate(0, -100px);
transition: opacity 2s, transform 2s;
opacity: 0
}
然后
window.setTimeout(function() {
// set display to none, and then remove .disappear
}, 2000)
编辑:一些阐述
给每张幻灯片
transition: opacity 2s, transform 2s;
并将它们放置在(页面)中心。所有未显示的幻灯片都获得 .slidedBottom
类
使用以下类:
.slidedTop {
transform: translate(0, -100px);
opacity: 0;
}
.slidedBottom {
transform: translate(0, 100px);
opacity: 0;
}
.disappear {
opacity: 0;
}
.appear {
opacity: 1;
}
.hidden {
display: none; // or use the hidden attribute
}
对于淡出(向上)的元素:
// add .disappear
window.setTimeout(function() {
// remove disappear, add hidden, slidedTop
}, 2000)
淡入:
// remove hidden, slidedBottom, add appear
window.setTimeout(function() {
// remove appear
}, 2000)
关于javascript - 如何使用CSS同时滑动两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52373418/