Skip to content

Commit ce85dc5

Browse files
author
pc-david\david.desmaisons
committed
Example with mix of sortable and transition-group transition
1 parent a71b14a commit ce85dc5

File tree

4 files changed

+224
-369
lines changed

4 files changed

+224
-369
lines changed

‎examples/Transition_example_2.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Example ul element</title>
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<link rel="stylesheet" href="css/main.css">
12+
</head>
13+
14+
<body>
15+
16+
<div id="main">
17+
<div class="container-fluid machine-contents">
18+
<draggable :list="jobs" :options="{animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
19+
<transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
20+
<div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
21+
<div>
22+
{{ job.jobNumber }}
23+
</div>
24+
<div>
25+
<br>
26+
<button v-on:click="removeJob(index)">Remove</button>
27+
</div>
28+
</div>
29+
</transition-group>
30+
</draggable>
31+
</div>
32+
<button v-on:click="add">Add</button>
33+
</div>
34+
<script type="text/javascript" src="libs\vue\dist\vue.js"></script>
35+
<script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
36+
<script type="text/javascript" src="src\vuedraggable.js"></script>
37+
<script type="text/javascript" src="script\transition2.js"></script>
38+
</body>
39+
40+
</html>

‎examples/css/main.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,30 @@
3838
border: solid 1px;
3939
transition: all 1s;
4040
height: 60px;
41+
overflow: hidden;
4142
}
4243

44+
.item {
45+
padding: 4px;
46+
margin-top: 4px;
47+
border: solid 1px;
48+
height: 60px;
49+
}
50+
51+
/*.list-complete-item.no {
52+
transition: none !important;
53+
}*/
54+
55+
4356
.list-complete-enter, .list-complete-leave-active {
4457
opacity: 0;
4558
height: 0px;
4659
margin-top: 0px;
4760
padding: 0px;
4861
border: solid 0px;
4962
}
63+
64+
.machine-contents {
65+
margin-top: 10px;
66+
margin-bottom: 10px;
67+
}

0 commit comments

Comments
 (0)