ホームページ > 記事 > ウェブフロントエンド > Vue でアニメーショントランジションアニメーションを使用する方法
Vue でアニメーショントランジションアニメーションを使用する方法
- php中世界最好的语言オリジナル
- 2018-05-25 15:35:321596ブラウズ
今回は、Vue でアニメーション トランジション アニメーションを使用する方法を説明します。Vue でアニメーション トランジション アニメーションを使用する際の 注意事項 について、実際のケースを見てみましょう。
はじめに:- transitionメソッドの使い方
- transition組み込みメソッド
- transition-group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib\vue.js"></script>
<link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
<style>
[v-cloak] {
display: none;
}
p {
width: 100px;
height: 100px;
background: red;
margin: 10px auto;
}
/* .fade-enter-active, .fade-leave-active {
transition: 1s all ease;
}
.fade-enter-active {
opacity: 1;
width: 300px;
height: 300px;
}
.fade-leave-active {
opacity: 0;
width: 100px;
height: 100px;
}
.fade-enter, .fade-leave {
width: 100px;
height: 100px;
opacity: 0;
} */
</style>
<script>
window.onload = function() {
new Vue({
el: '#box',
data: {
show: '',
list: ['apple', 'banana', 'orange', 'pear']
},
computed: {
lists: function() {
var arr = [];
this.list.forEach(function(val) {
if (val.indexOf(this.show) != -1) {
arr.push(val);
}
}.bind(this))
return arr;
}
}
})
}
</script>
</head>
<body>
<p id="box" v-cloak>
<input type="text" v-model="show">
<!-- class定义 .fade
.fade-enter{} 初始状态
.fade-enter-active{} 进入过程
.fade-leave{} 离开状态
.fade-leave-active{} 离开过程
-->
<transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
<!-- 内置方法
@before-enter = "beforeEnter"
@enter = "enter"
@after-enter = "afterEnter"
@before-leave = "beforeLeave"
@leave = "leave"
@after-leave = "afterLeave"
-->
<!-- transition-group 多个元素运动，注意绑定key:1 -->
<p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</p>
</body>
</html>を読んでメソッドをマスターしたと思いますこの記事の事例など、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。 推奨読書:
vue コンポーネントを使用してコンテンツを配布するためのスロットの使用手順の詳細な説明
vue テクノロジーを使用する際に見落とされやすい 7 つのポイント
以上がVue でアニメーショントランジションアニメーションを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。