删除时把ease-in改为ease-out仍然横向过度如何实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>lesson 26</title>
<style>
.v-enter-from,.v-leave-to {
opacity: 0;
transform: translateY(30px);
}
.v-enter-active,.v-leave-active {
transition: all .5s ease-in;
}
.v-enter-to,.v-leave-from {
opacity: 1;
transform: translateY(0);
}
.v-move {
transition: all .5s ease-in;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 列表动画的实现
const app = Vue.createApp({
data() {
return { list: [1, 2, 3] }
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1);
},
clearClick(){
this.list.shift(this.list.length+1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
<button @click="clearClick">删除</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
正在回答 回答被采纳积分+1
同学你好，老师的代码有动画效果，如下：
代码1（运动方向是x轴移动）：
代码2（入场是y轴移动，离场是x轴移动）：
代码1如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>lesson 26</title>
<style>
.v-enter-from,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
transition: all .5s ease-out;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
transform: translateX(0);
}
.v-move {
transition: all .5s ease-out;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 列表动画的实现
const app = Vue.createApp({
data() {
return { list: [1, 2, 3] }
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1);
},
clearClick() {
this.list.shift(this.list.length + 1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
<button @click="clearClick">删除</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
代码2如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>lesson 26</title>
<style>
.v-enter-from {
opacity: 0;
transform: translateX(0px) translateY(30px);
}
/* 入场过程中 */
.v-enter-active {
transition: all .5s ease-in;
}
/* 入场后 */
.v-enter-to {
opacity: 1;
transform: translateX(0px) translateY(0);
}
/* 准备离场 */
.v-leave-from {
opacity: 1;
transform: translateY(0) translateX(0);
}
/* 离场过程中 */
.v-leave-active {
transition: all .5s ease-out;
}
/* 已经离场时 */
.v-leave-to {
opacity: 0;
transform: translateY(0) translateX(30px);
}
/* 移动过程中 */
.v-move {
transition: all .5s ease-out;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 列表动画的实现
const app = Vue.createApp({
data() {
return { list: [1, 2, 3] }
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1);
},
clearClick() {
this.list.shift(this.list.length + 1);
}
},
template: `
<div>
<transition-group>
<span class="list-item" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
<button @click="clearClick">删除</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
注意：
如下链接根本没有使用，它会影响页面加载速度，建议删除：
同学再测试一下。
如果还是不行，建议新建一个问题，把自己修改后的代码(有问题的代码）全部粘贴出来，老师再测试一下。
祝学习愉快！
同学你好，解答如下：
1、ease-in和ease-out都是控制动画速度，不会影响动画形式。所以只将速度改成了ease-out，动画的形式是不变的。
2、ease-in时，元素的动画形式是“y方向位置改变”，同学是想将速度改成ease-out，然后让元素“x方向位置改变”吗？如果的话，可以改变过渡形式，例如（入场、出场动画形式都改成x方向位置改变）：
如果想让进入、退出的动画形式、速度都不一样，可以参考如下样式：
/* 入场时 */
.v-enter-from {
opacity: 0;
transform: translateX(0px) translateY(30px);
}
/* 入场过程中 */
.v-enter-active {
transition: all .5s ease-in;
}
/* 入场后 */
.v-enter-to {
opacity: 1;
transform: translateX(0px) translateY(0);
}
/* 准备离场 */
.v-leave-from {
opacity: 1;
transform: translateY(0) translateX(0);
}
/* 离场过程中 */
.v-leave-active {
transition: all .5s ease-out;
}
/* 已经离场时 */
.v-leave-to {
opacity: 0;
transform: translateY(0) translateX(30px);
}
/* 移动过程中 */
.v-move {
transition: all .5s ease-out;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星