legend2---开发日志11（如何提高终极开发效率）
一、总结
一句话总结：
实在没必要摸索着做，直接学了做，用专门的东西来做，岂不是要省时省事很多。岂不美哉。
1、vue中的滚动字幕动画效果如何实现（那六个状态怎么确定，active激活态又是什么）？
进入时：在enter中设置初始状态，在enter-to中设置最终状态，在enter-active设置初始状态到最终状态的动画
退出时：在leave中设置初始状态，在leave-to中设置最终状态，在leave-active设置初始状态到最终状态的动画
可以通过vue变量的true和false来触发enter和leave动画
transform: translateX(100%)可做水平移动，表示右移100%
如下代码是滚动字幕的代码
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all 7.0s linear;
}
.slide-fade-enter {
transform: translateX(100%);
}
.slide-fade-enter-to ,.slide-fade-leave{
transform: translateX(-100%);
}
</style>
2、css动画中的easy，linear这些是什么属性（就是他们上级的名字）？
transition-timing-function 属性
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
3、legend2系统的设计理念是什么？
以加强【好玩性】为主
4、js判断数据是否为空？
if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的
if(a == null) { // 等同于 a === undefined || a === null
if(a == "" || a == null || a == undefined){ // "",null,undefined
if(!a){ // "",null,undefined,NaN
if(!$.trim(a)){ // "",null,undefined
if(a.length == 0){ // "",[]
// var a = "";
// var a = " ";
// var a = null;
// var a = undefined;
// var a = [];
// var a = {};
// var a = NaN; if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的
console.log("为undefined");
} if(a == null) { // 等同于 a === undefined || a === null
console.log("为null");
} // String
if(a == "" || a == null || a == undefined){ // "",null,undefined
console.log("为空");
}
if(!a){ // "",null,undefined,NaN
console.log("为空");
}
if(!$.trim(a)){ // "",null,undefined
console.log("为空");
} // Array
if(a.length == 0){ // "",[]
console.log("为空");
}
if(!a.length){ // "",[]
console.log("为空");
} // Object {}
if($.isEmptyObject(a)){ // 普通对象使用 for...in 判断，有 key 即为 false
console.log("为空");
}
5、js中如何区别是json对象还是数组？
bottom_broadcast.broadcast instanceof Array 数组返回true，json对象返回false
6、thinkphp中if标签或者关系的多个条件用什么关键词，用'||'可以么？
不可以
要用OR，条件通括号括起来，{if condition="($name == 1) OR ($name > 100) "}
{if condition="($name == 1) OR ($name > 100) "} value1
{elseif condition="$name eq 2"/}value2
{else /} value3
{/if}
7、vue控制的html里面，jquery函数例如$('#commonly_day_day_blog').change(function ()函数不起作用怎么办？
把jquery函数移出vue的控制区域即可
8、当广播部分挡住做题按钮部分，做题按钮无法点击怎么解决？
想办法把广播移到不会和按钮重叠的地方--这种方法不好
用另外一个vue变量来控制文字部分的显示隐藏就好了，不能用和滚动同样的变量，会导致无法滚动
<div v-if="marquee_show_begin" class="broadcast" style="width:100%;height: 35px;line-height:35px;position: fixed;top: 60px;padding: 0 3px;">
<!--用js函数来实现好的多-->
<div style="position:absolute;left: 17px;width: 100%;height: 35px;line-height:35px;">
<transition name="slide-fade">
<p v-if="marquee_show"><span v-html="broadcast.sn_content"></span></p>
</transition>
</div>
</div>
$(function () {
//控制【弹出奖励的】的vue代码
bottom_broadcast = new Vue({
el: '#bottom_broadcast',
data: {
broadcast: window.broadcast,
marquee_show: false,
marquee_show_begin:false,
}
});
if(bottom_broadcast.broadcast instanceof Array) bottom_broadcast.marquee_show=false;
else bottom_broadcast.marquee_show=true;
console.log(bottom_broadcast.broadcast);
});
9、如何让vue实现的广播7s运行一条广播，15s向服务器请求一次，并且广播内容不会在运动完后还静止显示在哪8s？
vue的动画的钩子函数，比如进去前做什么，进入后做什么
在自己的代码中试不出来效果，可以找标准代码来试，比如菜鸟学院上
在菜鸟学院的vue钩子的代码中，vue的css和js效果共存的时候，里面加了一句v-bind:css="false"，
<transition name="slide-fade" v-on:before-enter="beforeEnter" v-bind:css="false">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
<!--
Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})10、在广播中，下面的代码里面为什么marquee_show要设置为false，marquee_show_begin要设置为true才有一直的广播的滚动效果？
marquee_show_begin设置为true为广播滚动提供了条件
marquee_show设置为false，是因为请求到数据，marquee_show会为true，而false到true才会触发滚动效果的动画
|||-begin
//每次一条，7秒请求一次,运行7秒
setInterval(function () {
bottom_broadcast.broadcast=[];
bottom_broadcast.marquee_show=false;
bottom_broadcast.marquee_show_begin=true;
require_broadcast();
},7000);
|||-end