|
@@ -28,7 +28,6 @@ |
|
@@ -28,7 +28,6 @@ |
28
|
</template>
|
28
|
</template>
|
29
|
|
29
|
|
30
|
<script>
|
30
|
<script>
|
31
|
-import anime from 'animejs';
|
|
|
32
|
import {createNamespacedHelpers} from 'vuex';
|
31
|
import {createNamespacedHelpers} from 'vuex';
|
33
|
const {mapMutations, mapState} = createNamespacedHelpers('article');
|
32
|
const {mapMutations, mapState} = createNamespacedHelpers('article');
|
34
|
|
33
|
|
|
@@ -116,6 +115,9 @@ export default { |
|
@@ -116,6 +115,9 @@ export default { |
116
|
type: this.type
|
115
|
type: this.type
|
117
|
});
|
116
|
});
|
118
|
}
|
117
|
}
|
|
|
118
|
+ import('animejs').then(({default: anime}) => {
|
|
|
119
|
+ this.anime = anime;
|
|
|
120
|
+ });
|
119
|
},
|
121
|
},
|
120
|
methods: {
|
122
|
methods: {
|
121
|
...mapMutations(['CHANGE_ARTICLE_LIST_INTRO_HEIGHT', 'CHANGE_ARTICLE_LIST_INTRO']),
|
123
|
...mapMutations(['CHANGE_ARTICLE_LIST_INTRO_HEIGHT', 'CHANGE_ARTICLE_LIST_INTRO']),
|
|
@@ -144,13 +146,16 @@ export default { |
|
@@ -144,13 +146,16 @@ export default { |
144
|
if (!this.isEllipsis) {
|
146
|
if (!this.isEllipsis) {
|
145
|
return;
|
147
|
return;
|
146
|
}
|
148
|
}
|
|
|
149
|
+ if (!this.anime) {
|
|
|
150
|
+ return;
|
|
|
151
|
+ }
|
147
|
const isExpand = !this.data.isExpand;
|
152
|
const isExpand = !this.data.isExpand;
|
148
|
const height = isExpand ? this.data.introHeight : this.introCollapseHeight;
|
153
|
const height = isExpand ? this.data.introHeight : this.introCollapseHeight;
|
149
|
|
154
|
|
150
|
this.$emit('on-expanding');
|
155
|
this.$emit('on-expanding');
|
151
|
|
156
|
|
152
|
this.isPreExpand = isExpand;
|
157
|
this.isPreExpand = isExpand;
|
153
|
- anime({
|
158
|
+ this.anime({
|
154
|
targets: this.$refs.intro,
|
159
|
targets: this.$refs.intro,
|
155
|
height,
|
160
|
height,
|
156
|
easing: 'cubicBezier(0.165, 0.84, 0.44, 1)',
|
161
|
easing: 'cubicBezier(0.165, 0.84, 0.44, 1)',
|