溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

在Vue中使用 animate.css 庫

發(fā)布時(shí)間：2020-08-06 01:39:32 來源：網(wǎng)絡(luò) 閱讀：365 作者：梁十八 欄目：web開發(fā)

要在class的樣式中加上transform-origin: left center，不然可能會出問題：

<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????@keyframes?bounce-in?{
????????????0%?{
????????????????transform:?scale(0);
????????????}
????????????50%?{
????????????????transform:?scale(15);
????????????}
????????????100%?{
????????????????transform:?scale(1);
????????????}
????????}
????????.fade-enter-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s;
????????}
????????.fade-leave-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s?reverse;
????????}
????</style>
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>

當(dāng)然，還可以自定義style中的class名：

<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????@keyframes?bounce-in?{
????????????0%?{
????????????????transform:?scale(0);
????????????}
????????????50%?{
????????????????transform:?scale(15);
????????????}
????????????100%?{
????????????????transform:?scale(1);
????????????}
????????}
????????/*.fade-enter-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s;
????????}
????????.fade-leave-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s?reverse;
????????}*/
????????.haha-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s;
????????}
????????.haha-leave?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s?reverse;
????????}

????</style>
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<!--?<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>?-->
????????//自定義class名字：
????????<transition?name="fade"?enter-active-class="haha-active"?leave-active-class="haha-leave">
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>

自己命名class名有個(gè)好處，可以用別人的動畫。css在這個(gè)網(wǎng)址下載：https://daneden.github.io/animate.css/

<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<!--?<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>?-->
????????//自定義class名字：
????????<transition?name="fade"?enter-active-class="animated?rubberBand"?leave-active-class="animated?hinge">
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手