Vue.use(window['vue-js-toggle-button'].default)
new Vue({
el: "#container",
/* components: {
\t toggleButton: window['vue-js-toggle-button']
},*/
data: {
include: true,
filterTags: 'even odd',
articles: [{
\t id: 0,
\t title: 'Test0',
tags: ['even']
},
{
\t id: 1,
\t title: 'Test1',
tags: ['odd']
},
{
\t id: 2,
\t title: 'Test2',
tags: ['even']
},
{
\t id: 3,
\t title: 'Test3',
tags: ['odd']
},
{
\t id: 4, // just to test even & odd exluding
\t title: 'Test4',
tags: ['no number']
}
]
},
computed: {
\t filtered() {
\t return this.articles.filter((article) =>
\t article.tags.some((tag) =>
{
let result = this.filterTags && this.filterTags.indexOf(tag) !== -1
return this.include ? result: !result;
\t })
)
}
},
methods: {
\t updateFilterInclude ({value}) {
\t console.log(value)
this.include = value
}
}
})
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.vue-js-switch#changed-font {
font-size: 16px !important;
}
ul {
list-style-type: none;
}
.flip-list-move {
transition: transform 0.5s;
}
#container {
width: 200px;
/* border: 1px solid black; */
position: absolute;
left: 0;
padding: 5px;
}
.animation {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.left-position {
background-color: green;
/*transform: translate(0, 0);*/
margin-left: 0;
}
.right-position {
background: red;
/*transform: translate(100%, 0);*/
margin-left: calc(75% - 20px);
}
input {
width: calc(100% - 14px);
padding: 5px;
}
.slider {
border: 1px solid gray;
margin-top: 5px;
padding: 5px;
border-radius: 10px;
}
.element {
width: 25%;
cursor: pointer;
padding: 10px;
/* border: 1px solid black; */
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://rawgit.com/euvl/vue-js-toggle-button/master/dist/index.js"></script>
<div id="container">
Filter tags<input v-model="filterTags"/>
<div class="slider">
<div class="element animation" @click="include = !include" :class="{'left-position': include, 'right-position': !include}">
{{include ? 'include' : 'exlude'}}
</div>
</div>
<hr/>
<toggle-button
id="changed-font"
:width="200"
:height="40"
:color="{checked: 'green', unchecked: 'red'}"
:labels="{checked: 'include', unchecked: 'exclude'}" :value="include" @change="updateFilterInclude"> {{include ? 'include' : 'exlude'}}</toggle-button>
<transition-group name="flip-list" tag="ul">
<li v-for="article in filtered" :key="article">
{{article.tags.join(' ')}} - {{article.title}}
</li>
</transition-group>
</div>
我怕回答你的問題是沒有。你可以淡出和淡入，但是如果你想要一個運動轉換，你需要改變一個元素的位置屬性，而不是重新設置它。 –
這應該如何？它可以像這個[小提琴]（https://jsfiddle.net/awolf2904/9t2btpvs/）嗎？如果這就是你想要的，我可以添加一個答案，並給出一些細節，我已經創建了它。但正如羅伊所提到的，創建一個元素並改變點擊位置可能更容易。就像在這[小提琴]（https://jsfiddle.net/awolf2904/741wk6d0/）。我認爲這看起來更好，因爲顏色變化也是動畫。或者，內容不同的兩個元素是？ – AWolf
@AWolf：非常感謝小提琴 - 他們會做出很好的回答。第二個符合我的法案（明天我會仔細看看）。我想要做的是讓兩組標籤過濾文章列表（一組「顯示帶這些標籤的文章」，另一組「不顯示......」）。過濾和標籤切換工作，（我的代碼示例是我實際編碼的簡化）。我只是覺得，當點擊一個標籤時，其他組的幻影太突然了，我寧願讓它從一個組滑到另一個組 - 第二個小提琴似乎實現了。 – WoJ