<template>
<div class="about">
主页我
<!-- <button @click="fn">弹出alert</button> -->
<!-- <Fade/> -->
<br/>
<button
class='btn'
@click="show = !show">渐变</button>
<br/>
<transition name="animate" :duration="{enter: 2000, leave: 4000}">
<div
class='pp2'
v-show="show"
>
啥啦啦啦....
</div>
</transition>
<br/>
<br/>
<button @click="show2 = !show2">动画</button>
<br/>
<br/>
<transition name="animate2">
<div
class='pp2'
v-show="show2"
>
动画
</div>
</transition>
<br/>
<br/>
<button @click="show3 = !show3">函数</button>
<br/>
<br/>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEneter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<div
class='pp2'
v-show="show3"
>
js钩子函数
</div>
</transition>
<br/>
<br/>
<button @click="show4 = !show4">函数2</button>
<br/>
<br/>
<transition
@before-enter="beforeEnter2"
@enter="enter2"
@before-leave="beforeLeave2"
@leave="leave2"
>
<div class="pp2" v-show="show4">
js钩子函数222222
</div>
</transition>
<br>
<br>
<button @click="show5 = !show5">自定类名</button>
<br>
<br>
<!-- 自定定义类名的过渡,我自己测试, 只能使用关键帧动画, 使用过渡无效..... -->
<!-- 初始化过渡渲染 -->
<transition
appear
appear-active-class="custom-appear-active-class"
>
<div>
初始化,过渡渲染!!!!!!!
</div>
</transition>
<!-- <p>------------------------------------------</p>
<div class="tra" id="tra" @transitionstart="start" @transitionend="end">
监听transition的开始和结束
</div>
<hr class="line"/>
<div class="animte" @animationstart="aStart" @animationend="aEnd" @animationiteration="aDuration">
监听animate的开始和结束
</div> -->
</div>
</template>
<script>
export default {
name: 'about',
data () {
return {
list: [1, 2, 3, 4, 5, 6, 7],
show: true,
show2: true,
show3: true,
show4: true,
show5: false,
long: 0,
timer: null
}
},
methods: {
fn () {
this.$Alert('这是我传入的的数据!!!!!!!!!!!!!!!!!!!!!!!!!')
},
// 监听过度开始的事件, 有几个属性发生变化这个事件就会触发几次
// 每个属性变化都会触发一次 事件对象的 propertyName 属性用于区分是哪一个属性变化
start (e) {
console.log('过度开始', e)
},
// 监听过度结束的事件, 有几个属性发生变化这个事件就会触发几次
// 每个属性变化都会触发一次 事件对象的 propertyName 属性用于区分是哪一个属性变化
end (e) {
console.log('过度结束', e)
},
// 监听 动画开始的方法
aStart (e) {
console.log('动画开始', e)
},
// 监听动画结束的方法, 动画必须完整的完成才会触发
aEnd (e) {
console.log('动画结束', e)
},
// 开始新一轮动画循环时触发 循环次数为1时不会触发
aDuration () {
console.log('动画循环')
},
beforeEnter (el) {
el.style.transform = 'translateY(100%)'
el.style.opacity = 0
},
enter (el, done) {
setTimeout(() => {
el.style.transform = 'translateY(0)'
el.style.opacity = 1
el.style.transition = 'all 1s ease'
done()
})
},
afterEneter (el) {
console.log('进入结束', el)
},
beforeLeave (el) {
el.style.transform = 'translateY(0)'
el.style.opacity = 1
},
leave (el, done) {
setTimeout(() => {
el.style.transform = 'translateY(100%)'
el.style.opacity = 0
el.style.transition = 'all 1s ease'
})
},
afterLeave (el) {
console.log('离开结束', el)
},
// 练习
beforeEnter2 (el) {
el.style.opcity = 0
el.style.transform = 'translateX(-100%)'
},
enter2 (el) {
setTimeout(() => {
el.style.opacity = 1
el.style.transform = 'translateX(0)'
el.style.transition = '0.8s'
})
},
beforeLeave2 (el) {
el.style.opacity = 1
el.style.transform = 'translateX(0)'
el.style.transition = '0.8s'
},
leave2 (el) {
el.style.opacity = 0
el.style.transform = 'translateX(-100%)'
}
}
}
</script>
<style lang="scss" scoped>
.line {
margin: 20px 0;
}
.tra {
transition: 1.5s;
opacity: 1;
color: red;
border: 2px solid green;
display: inline-block;
user-select: none;
&:hover {
opacity: 0.5;
color: blue;
// border-color: yellow;
// padding: 10px 20px;
}
}
.animte {
opacity: 1;
color: red;
border: 2px solid green;
display: inline-block;
user-select: none;
&:hover {
animation: an1 1s infinite alternate;
}
}
@keyframes an1 {
from {
transform: translateX(0);
color: red;
}
to {
transform: translateX(-100px);
color: blue;
}
}
.btn {
margin: 15px;
}
.pp2 {
padding: 5px 10px;
display: inline-block;
border: 1px solid red;
border-radius: 2px;
font-size: 12px;
font-weight: 400;
}
.animate-enter-active, .animate-leave-active {
transition: .5s;
}
// 进入前的状态
.animate-enter {
opacity: 0;
color: blue;
transform: translateX(50px);
}
/**
// 进入最终的状态
这不是最终显示状态
但是这个是进入前状态的需要改变的目标,也就是, 进入结束时会是这个状态
但是如果这个状态和 最终显示的装填不一致,则在下一帧会"跳跃"至,正常显示的状态
*/
.animate-enter-to {
opacity: 0.5;
color: red;
transform: translateX(100px);
}
// 离开前的状态
.animate-leave {
opacity: 1;
color: green;
}
// 离开最终的状态
/**
*/
.animate-leave-to {
opacity: 0.1;
color: yellow;
transform: translateX(-50px);
}
// vue动画
.animate2-enter-active {
animation: key1 .5s reverse;
}
.animate2-leave-active {
animation: key1 .5s;
}
@keyframes key1 {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(-20px);
opacity: .2;
}
}
</style>
<style lang='scss'>
.custom-appear-class {
opacity: 0;
transform: translateY(100%);
}
.custom-appear-to-class {
opacity: 1;
transform: translateY(-100%);
}
.custom-appear-active-class {
animation: key2 2s;
}
@keyframes key2 {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
</style>
