从下到上一一列出动画
Posted
技术标签:
【中文标题】从下到上一一列出动画【英文标题】：List animation one by one from bottom to top 【发布时间】：2019-04-11 11:03:28 【问题描述】：我正在尝试实现这样的动画效果
我也得到了简单的 Vue 组件
<template>
<div>
<div v-if="cities[index]">
v-if="cities[index]"
</div>
<div class="disable" v-if="cities[index+ 1]">
v-if="cities[index+ 1]"
</div>
<button @click="index++">Next City</button>
</div>
</template>
<script>
export default
data()
return
cities = [
"San Francisco",
"Seattle",
"Chicago",
"Atlanta"
],
index: 0
</script>
所以，我知道我必须将每个 div 包装成 transition 并添加到其中 :key="index"，但我的问题是应该使用什么样的动画我用这种情况吗？
【问题讨论】：
实际上，您似乎更适合在cities 数据上使用v-for 循环，然后将<transition-group> 用于动画。也许看看 Vue 文档中的那些。
【参考方案1】：
我试图模拟你的情况，希望对你有所帮助。
我使用了一些 CSS 规则和 Vue.js 过渡
new Vue(
el: '#app',
data:
cities: [
"San Francisco",
"Seattle",
"Chicago",
"Atlanta",
"Paris",
"NYC",
"Roma",
"London"
],
currentIndex: 0
,
methods:
next()
this.currentIndex < this.cities.length - 1 ? this.currentIndex++ : this.currentIndex = 0;
);.circle
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #08faf5;
height: 50px;
width: 50px;
border-radius: 30px;
.card
height: 100px
.disable
opacity: 0.2;
.btn-container
padding: 20px;
.slide-fade-enter-active
transition: all .7s ease-out;
.slide-fade-enter
transform: translateY(40px);
opacity: 0;
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="(c,index) in cities">
<transition name="slide-fade">
<div v-if="index==currentIndex" class="card">
<div class="card-body">
<div class="circle">index+1</div>
cities[index]
</div>
</div>
</transition>
<transition name="slide-fade">
<div class="disable" v-if="index==currentIndex+1">
<div class="card-body">
<div class="circle">index+1</div>
cities[index]
</div>
</div>
</transition>
</div>
<div class="btn-container">
<button @click="next" class="btn btn-primary">Next City</button>
</div>
</div>【讨论】：
以上是关于从下到上一一列出动画的主要内容，如果未能解决你的问题，请参考以下文章