小编Ser*_*sov的帖子

我正在尝试制作一个水平规则,中间有一些文字.例如:

-----------------------------------我的头衔------------ -----------------

有没有办法在CSS中做到这一点？没有所有" - "破灭显然.

如何从OS X终端创建可写入的目录？

看看这个CodePen,看看我的意思:

.perspective-container {
  margin: 50px 0;
  perspective: 1000px;
  perspective-origin: 0 50%;
}
.card {
  border: 10px solid blue;
  width: 300px;
  height: 300px;
  overflow: hidden;
  transform: rotateY(-45deg);
}
.card-inner {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.scroller {
  transform: translate(0, -100px);
}
.scroller-3d {
  transform: translate3d(0, -100px, 0);
}
.will-change {
  will-change: transform;
}

<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
  <div class="card"><div class="card-inner">
    <div class="scroll-container">
      <div class="scroller will-change">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div …

我没有默认的动画元素.还有一个触发器可以让我打开和关闭该元素的动画.动画本身非常简单:从左到右移动元素.

当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是:有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画.

这是我的元素和动画:http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 2s infinite ease-in-out;
}

@-webkit-keyframes dance {
  0%, 100% { -webkit-transform: translateX(0); }
  50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
  0%, 100% { -moz-transform: translateX(0); }
  50% { -moz-transform: translateX(300px); }
}

我正在尝试使用Create React App，但收到错误消息，它需要Node 10或更高版本。我的节点版本是Node 8.10.0，由于它是工作机器，所以我无法更新 Node 版本。有没有办法运行旧版本的 Create React App 来与我的旧 Node 版本一起使用？

我刚刚开始Rivets.js,看起来很有希望作为简单的数据绑定框架.

我已经到了我不知道如何将"自定义参数"传递给rv-on-click活页夹的地步,所以我试图从这个想法:https://github.com/mikeric/rivets/pull/34

我的代码:

rivets.binders["on-click-args"] = {
  bind: function(el) {    
    model = this.model;
    keypath = this.keypath;

    if(model && keypath)
    {
        var args = keypath.split(' ');
        var modelFunction = args.shift();
        args.splice(0, 0, model);

        var fn = model[modelFunction];            
        if(typeof(fn) == "function")
        {
            this.callback = function(e) {
                //copy by value
                var params = args.slice();
                params.splice(0, 0, e);                
                fn.apply(model, params);
            }

            $(el).on('click', this.callback);
        }                        
    }
  },

  unbind: function(el) {
    $(el).off('click', this.callback);
  },

  routine: function(el, value) {    
  } …

我想text-overflow: ellipsis在.navbar-brandBootstrap 3导航栏的文本上使用,以便在iPhone等设备上截断文本而不是垂直大小的导航栏.

我也有两个按钮:

<nav class="navbar navbar-default navbar-fixed-top">
  <button type="button" class="btn btn-default navbar-btn navbar-left">Back</button>
  <a class="navbar-brand" href="#" >Branding text that can sometimes be too wide</a>
  <button type="button" class="btn btn-default navbar-btn navbar-right">Logout</button>
</nav>

该text-overflow: ellipsis作品(有white-space: nowrap和overflow: hidden,如果我硬编码的宽度也成立).navbar-brand,但我正在寻找一种方式,以便最大可用空间用来自动完成此任务.

PS

添加到.navbar-brand宽度为硬编码时的CSS :

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

我正在尝试将节点从 ref 传递到上下文。但是因为我在第一次渲染后没有重新渲染，所以传递的节​​点是null. 我想到了两种变体（但我认为它们不是最好的）：

1. 通过ref而不是ref.current. 但是在用例中，我将被迫使用类似的东西contextRef.current而不是contextNode.

2. 使用状态（像firstRender得到一个后）重新渲染的成分ref.current。这似乎不是最优的。

什么是正确的（最好的？）方法？

代码沙盒

import React, { createContext, createRef, useContext, useEffect } from "react";
import ReactDOM from "react-dom";

const Context = createContext(null);

const App = ({ children }) => {
  const ref = createRef();

  return (
    <div ref={ref}>
      <Context.Provider value={ref.current}>{children}</Context.Provider>
    </div>
  );
};

const Child = () => {
  const contextNode = useContext(Context);

  useEffect(() => {
    console.log(contextNode);
  });

  return <div />; …

Materialize框架带有奇怪的布局(至少对我而言).我在列之间找不到任何余量.这是我的代码:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

这就是浏览器的外观.

列之间没有边距!

我试图在鼠标悬停时显示div,但它是闪烁的,我如何显示/隐藏没有任何混蛋并顺利过渡？

我也尝试使用jquery淡入/淡出但仍然闪烁.

这是代码

body {
	margin: 0;
}
.row {
	float: left;
	width: 100%;
}
.col {
	float: left;
	width: 25%;
	position: relative;
	margin: 0 10px 0 0;
}
.front {
	width: 100%;
	height: 300px;
	background-color: #999
}
.back {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	opacity: 0;
	visibility: hidden;
	background-color: #ff0;
	z-index: 2;
	width: 100%;
}
.front:hover + .back {
	opacity: 1;
	visibility: visible;
}

<div class="row">
  <div class="col">
    <div class="front">This is front div</div>
    <div class="back">This is …