Question

我目前有3个div。我不知道什么是最好的方法，所以当我单击一个元素时，它将保留过渡的最后一个属性，但是我需要这种效果仅对每个元素都一次发生。

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Dimensions, Picker } from 'react-native';

export default class Test extends Component {
 constructor() {
  super();
   this.state = {
        services: [],
        selectedService: 'a'
  }
 }

componentDidMount() {
//replace api request instead of setTimeout and then change the services data with setState
setTimeout(() =>  { 
 this.setState({
  services: [ 'one', 'two', 'three', 'four', 'five' ]
  }) 
 }, 3000)
}

render() {
  return (
   <View>
    <Text>Pick a service</Text>
    <Picker
      selectedValue={this.state.selectedService}
      onValueChange={(service) => (this.setState({ selectedService: service }))} >
      {this.state.services.map((s, i) => {
        return <Picker.Item key={i} value={s} label={s} />
      })}
    </Picker>
  </View>
);
}
}

最初，我的元素具有以下属性：

.son{
 width:100px;
 background:#dcdcdc;
 margin:10px;
 transition: all 0.5s;
}

但是我希望您单击两次，查看过渡，但将其保持在最后状态。最后，这些属性将保留。但是我不知道如何保存它们，因此，当我单击另一个元素时，我希望最后选择的元素恢复正常。

怎么办？

这是我的代码：

.son:active{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

https://jsfiddle.net/ndc6a587/

Answer 1

：访问过的伪标记可以提供帮助

.container{
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items:center;
}

.son{
 width:100px;
 background:#dcdcdc;
 margin:10px;
 transition: all 0.5s;
}

.son:active, .son:focus{
 width:200px;
 background:yellow;
 transition: all 0.5s;
}

.son a {display:block; text-decoration:none;color:#000;}

:target {
   width:200px;
   color:#000;
    background:yellow;
}

<div class="container">
	<div id="one" class="son"><a href="#one">text</a></div>
  <div id="two" class="son"><a href="#two">text</a></div>
  <div id="three" class="son"><a href="#three">text</a></div>
	
</div>

当我在CSS中使用转换时如何保存最后一个属性

1 个答案: