Question

我尝试使用ReactCSSTransitionGroup在React中实现淡入/淡出动画。我在之前的SO答案中遵循了这个solution。我有一个包含图像和文本的组件。动画对于文本是平滑的，但对于图像则不是。在动画中看起来像图像闪烁。

JS

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var items = [
    {id: 1, text: "item1", img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"},
  {id: 2, text: "item2", img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"},
  {id: 3, text: "item3", img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"},
  {id: 4, text: "item4", img: "https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"},
]

function findObjectByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var SwitchContent = React.createClass({
    render: function() {
        var obj = findObjectByKey(items, 'id', this.props.id);
        console.log(obj);

        return (
            <div>
        <style
            dangerouslySetInnerHTML={{
              __html: [
                '.backgroundImg {',
                '  background: url('+obj.img+');',
                '  background-size: auto 100px;',
                '}',
              ].join('\n'),
            }}
          />
         <div className="backgroundImg" />
         <div className="textContent">{obj.text}</div>
      </div> 
        );

    }
});

var Switch = React.createClass({
    getInitialState: function() {
        return {
            id: 1,
        };
    },
    toggle: function(e) {
        this.setState({ id: this.state.id === 4 ? 1 : this.state.id + 1 });
    },
    render: function() {
        var key = this.state.id;

        return (
            <div>
              <button onClick={this.toggle}>Toggle</button>
              <ReactCSSTransitionGroup
              transitionAppear
        transitionAppearTimeout={500}
        transitionLeaveTimeout={500}
        transitionEnterTimeout={500}
              className="container"
              transitionName="example">
                <div key={key} className="item_container">
                  <SwitchContent id={key} />
                </div>
              </ReactCSSTransitionGroup>
            </div>
        );

    }
});

React.render(<Switch/>, document.getElementById("switch"));

CSS

.backgroundImg {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: black;
  width: 100px;
  height: 100px;
}

.container {
    position: relative;
}
.container > div {
    position: absolute;
}
.button {
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 25px;
    font: bold 20px Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #000;
    /* Define transition on the "opacity" property. */    
    transition: opacity 0.5s ease-in;
}
.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

Answer 1

尝试将latd CSS类的undefined值和getlatlang(address); console.log(latd);//Not defined function getlatlang(address) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { //console.log(place); latd = results[0].geometry.location.lat(); lond = results[0].geometry.location.lng(); return latd,lond; } }); } transition-delay设置为.example-enter.example-enter-active：

ease-in-out

这样看起来更顺畅。分叉JSFiddle

Answer 2

不确定你的小提琴到底发生了什么，以及为什么下一张图片看起来不容易进入。

然而，我在最新的反应和使用生成器中重写了你的例子，所有似乎都正常工作。

你错过了示例出现的类，但我认为还有更多。您可以在此处查看我的沙箱：https://codesandbox.io/s/zw0xv4vy3x

如果基于这个工作示例，你能够找出你的错误，那就太棒了！如果没有，只需复制＆amp;粘贴，你应该很好。

<强> JS

import React, { Component } from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import { render } from "react-dom";
import "./main.css";

function* continuosArrayIterator(arr) {
  let idx = 0;
  while (idx < arr.length) {
    let ret = arr[idx];
    idx++;
    if (idx === arr.length) {
      idx = 0;
    }
    yield ret;
  }
}

class App extends Component {
  constructor() {
    super();
    this.clickHandler = this.clickHandler.bind(this);
    this.items = [
      {
        id: 1,
        text: "item1",
        img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"
      },
      {
        id: 2,
        text: "item2",
        img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"
      },
      {
        id: 3,
        text: "item3",
        img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"
      },
      {
        id: 4,
        text: "item4",
        img:
          "https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"
      }
    ];
    this.imageIterator = continuosArrayIterator(this.items);
    this.state = {
      image: this.imageIterator.next().value
    };
  }

  clickHandler(event) {
    return this.setState({
      image: this.imageIterator.next().value
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Next Image</button>
        <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionLeaveTimeout={500}
          transitionEnterTimeout={500}
          className="container"
          transitionName="example"
        >
          <div
            key={this.state.image.id}
            style={{
              position: "absolute",
              backgroundImage: `url(${this.state.image.img}`,
              backgroundSize: "auto 100px",
              height: "100px",
              width: "100px"
            }}
          />
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

<强> CSS

.container {
  position: absolute;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

ReactCSSTransition动画对于图像不平滑

2 个答案: