小编fre*_*gee的帖子

请参阅底部的编辑

我有一个 JavaScript 文件，正在使用 Eslint 进行检查。我正在使用 Prettier 来格式化代码。

我个人对此文件的选择是将行长度增加到 Prettier 默认的 80 个字符以上，即 2000 个字符。

所以我有一个 prettierrc.config.js：

module.exports = {
  printWidth: 2000
};

当我格式化代码并且我有一个 .eslintrc.js 时，它会起作用

module.exports = {
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": [
    "eslint-config-airbnb-base",
    "eslint-config-prettier"
  ],
  "plugins": [
    "eslint-plugin-import",
    "eslint-plugin-prettier"
  ],
  "rules": {
    "prettier/prettier": ["error", {}],
    "max-len": ["error", {"code": 2000, "ignoreUrls": true}],
    "linebreak-style": 0,
    "no-use-before-define": ["error", { "functions": false, "classes": false }],
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "no-underscore-dangle": 0, …

我的意图：

使用Vue.js（v2）属性[v-cloak]，我希望隐藏“ app”，直到准备好为止。删除[v-cloak]后，我希望“ app”淡入。使用CSS不透明度和过渡效果来实现淡入淡出。

问题：

从我的“应用”中删除[v-cloak]后，没有任何过渡。它只是从隐藏变为立即可见。似乎忽略了CSS。

例：

我使用Vue.js和JavaScript模拟版本做了一个夸张的示例，以展示它们的行为。

https://codepen.io/freemagee/pen/wXqrRM

查看此示例时，您将在5秒钟内看到“普通的旧JavaScript”红色框。但是，Vue受控版本不会出现褪色。它们在过渡时共享相同的CSS，因此理论上应该以相同的方式工作。

有人有效地使用了[v-cloak]来实现平滑过渡吗？

密码笔代码

的HTML

<div id="app" v-cloak>
  <div class="red-box"></div>
  <p>Vue.js {{ message }}</p>
</div>

<div id="app2" v-cloak>
  <div class="red-box"></div>
  <p>Plain old JavaScript</p>
</div>

的CSS

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

[v-cloak] .red-box {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 5s, opacity 5s linear;  
}

#app,
#app2{
  padding-top: 50px;
}

.red-box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: red;
  opacity: 1;
  visibility: visible;
  transition: opacity …

我希望这样做更好的方式,而无需硬编码整数$justPrices[$i]:

$pricesResult = array_merge($justPrices[0], $justPrices[1], $justPrices[2], $justPrices[3]);

$justPrices是一个多维数组,每个数组中包含4个'带'的价格.$justPrices例如的数据:

Array ( [0] => Array ( [0] => 40.95 [1] => 39.95 [2] => 39.45 [3] => 38.95 ) [1] => Array ( [0] => 45.80 [1] => 41.80 [2] => 41.50 [3] => 41.40 ) [2] => Array ( [0] => 45.95 [1] => 42.95 [2] => 41.95 [3] => 41.45 ) [3] => Array ( [0] => 50.00 [1] => 50.00 [2] => 50.00 [3] …

当单击一个元素时,我在jQuery中注册多次点击时遇到问题.我已经阅读了Stack Overflow上的一些其他线程来尝试解决它,但我认为这是我编写的代码.HTML代码无效,但这是由某些HTML 5和使用YouTube嵌入代码引起的.没有任何影响点击的内容.

jQuery,在document.ready上触发

function setupHorzNav(portalWidth) {
    $('.next, .prev').each(function() {
        $(this).click(function(e) {
            var target = $(this).attr('href');
            initiateScroll(target);
            console.log("click!");
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    });

    function initiateScroll(target) {
        var position = $(target).offset();
        $('html, body').animate({
            scrollLeft: position.left
        }, 500);
    }
}

示例HTML

<nav class="prev-next">
    <a href="#countdown-wrapper" class="prev">Prev</a>
    <a href="#signup-wrapper" class="next">Next</a>
</nav>

在Firefox中,单击一下即可记录"Click!" 16次!Chrome只能看到一个,但两个浏览器都显示上述代码存在问题.

我是否错误地编写了代码或者是否存在错误？

- 一些额外的信息------------------------------------------

setupHorzNav由我的代码中的另一个函数调用.我测试了这个,并确认它只在初始加载时调用一次.

if ( portalWidth >= 1248 ) {
    wrapperWidth = newWidth * 4;
    setupHorzNav(newWidth);
}
else
{
    wrapperWidth = '100%';
}

导航'prev-next'有多个实例.所有目标都是不同的锚.所有都在同一个html页面内.

<nav class="prev-next"> …